CSS3 's picture 3D Flip effect (page effect-daily one more)

Today, the result is a pure CSS3 effect--image 3D flip.

See Effect: http://localhost:63342/webfront/PC/rotate.html

This effect is mainly the use of CSS3 transform deformation properties, and the previous effect is different, this is not an animation, so did not take the animation attribute, but the transition transition attributes. This property toggles the element between the two effects and produces a transition effect. Please see the code for details.

HTML structure:

1     <DivID= "Content">2         <Divclass= "List">3             <imgsrc=".. /images/1.jpg ">4             <Divclass= "text">5 this is a puppy!! 6             </Div>7         </Div>8         <Divclass= "List">9             <imgsrc=".. /images/2.jpg ">Ten             <Divclass= "text"> One this is a puppy!!  A             </Div> -         </Div> -     </Div>

CSS style:

1 <style type= "Text/css" >2         *{margin:0px;padding:0px;}3 #content{4 width:500px;5 margin:30px Auto;6}7 . List{8 width:200px;9 margin:25px;Ten float: Left; One position:relative; A} - . List img{ - width:200px; the Height:200px; - Transform:Perspective (200px) Rotatey (0deg); - Opacity:1; - transition:transform 600ms ease,opacity 600ms Ease; + -webkit-transition:transform 600ms ease,opacity 600ms Ease; -} + . Text{ A Height:200px; at width:200px; - Line-height:200px; - background:#000; - Color:#fff; - Opacity:0; - position:Absolute; in text-align:Center; - Font-weight:Bold; to Top:0px; +  Left:0px; - Transform:Perspective (200px) Rotatey ( -180deg); the transition:transform 600ms ease,opacity 600ms Ease; * -webkit-transition:transform 600ms ease,opacity 600ms Ease; $}Panax Notoginseng . List:hover img{ - Transform:Perspective (200px) Rotatey (180deg); the Opacity:0; + transition:transform 600ms ease,opacity 600ms Ease; A -webkit-transition:transform 600ms ease,opacity 600ms Ease; the} + . List:hover. Text{ - Transform:Perspective (200px) Rotatey (0deg); $ Opacity:1; $ transition:transform 600ms ease,opacity 600ms Ease; - -webkit-transition:transform 600ms ease,opacity 600ms Ease; -} the </style>

The code is easy to understand, first set an initial rotation angle for the picture, because it is shown first, so the angle is 180deg and the transparency is 1. When the mouse is out of date, change the angle and transparency to make it flip. And the text behind it is such a truth.

Enjoy the code, enjoy life, web effects, daily one more.

CSS3 's picture 3D Flip effect (page effect-daily one more)