I think it's kind of fun, hehe ~
Here is a question to note that the picture reversal process may encounter a jump bug like the following:
This thing came out to scare me a lot, obviously this user experience is very bad, the workaround:
In. pic,. info{...} This style adds transform:perspective (800px) Rotatey (0deg) That's all I'm saying! Give him an initial position so he won't fly.
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Picture Flip Face</title> <styletype= "Text/css">. Con{width:249px;Height:299px;margin:100px Auto 0;position:relative;Transform-style:preserve-3d; }. pic,. Info{width:249px;Height:299px;position:Absolute; Left:0;Top:0; /*Hide back picture*/backface-visibility:Hidden;transition:All 1s ease; /*prevent jumps from changing bugs*/Transform:Perspective (800px) Rotatey (0deg); }. Info{width:249px;Height:299px;Background-color:RGB (80,143,22);text-align:Center;Line-height:299px;Transform:Translatez (2px) Rotatey (180deg); }. Con:hover. pic{Transform:Perspective (800px) Rotatey (180deg); }. Con:hover. Info{Transform:Perspective (800px) Rotatey (0deg); } </style></Head><Body> <Divclass= "Con"> <Divclass= "Pic"><imgsrc= "Images/login.jpg"alt= "Duckling"></Div> <Divclass= "Info">Picture Text description</Div> </Div></Body></HTML>
:
css3--making a small animation of the flip of a picture