Pure CSS3 hand-crafted Web image effect

1. Mouse hover, picture 360 degrees rotation

   
   Effect:

   
   

   Code:

   
   

   <style>

           . Rotate-demo {

               width:220px;

               height:220px;

               margin:0 Auto;

               Background:no-repeat URL ("Images/author.jpg") left top;

               -webkit-background-size:220px 220px;

               -moz-background-size:220px 220px;

               background-size:220px 220px;

               -webkit-border-radius:110px;

               border-radius:110px;

               -webkit-transition:-webkit-transform 2s ease-out;

               -moz-transition:-moz-transform 2s ease-out;

               -o-transition:-o-transform 2s ease-out;

               -ms-transition:-ms-transform 2s ease-out;

           }

               . rotate-demo:hover {

                   -webkit-transform:rotatez (360DEG);

                   -moz-transform:rotatez (360DEG);

                   -o-transform:rotatez (360DEG);

                   -ms-transform:rotatez (360DEG);

                   Transform:rotatez (360DEG);

               }

       </style>

   <p class= "Rotate-demo" ></p>

   
   Knowledge Points: The transform attribute of CSS3 can apply 2D or 3D transformations to elements. This property allows us to rotate, scale, move, or skew elements. The set to Rotatez (angle) implements the 3D rotation of the DOM elements along the Z axis, and the related settings are rotate, Rotate3d, Rotatex, and Rotatey.

2. Picture Hover Zoom

   
   
   Effect:

   
   

   
   Code:

   
   

   CSS3:

   <style type= "Text/css" >

       . img-container {

           Background-color: #000;

           width:220px;

           height:220px;

           margin:20px 50px;

       }

       . img {

           -webkit-transform:scale (0.6);

           -moz-transform:scale (0.6);

           -o-transform:scale (0.6);

           -webkit-transition-duration:0.5s;

           -moz-transition-duration:0.5s;

           -o-transition-duration:0.5s;

       }

           . img img {

               padding:1px;

               border-radius:10px;

               border:1px solid #fff;

           }

           . img:hover {

               -webkit-transform:scale (0.8);

               -webkit-box-shadow:0px 0px 30px #ccc;

               -moz-transform:scale (0.8);

               -moz-box-shadow:0px 0px 30px #ccc;

               -o-transform:scale (0.8);

               -o-box-shadow:0px 0px 30px #ccc;

           }

   </style>

   Html:

   <p class= "Img-container" >

               <p class= "img" >

               </p>

           </p>

   
   Knowledge Points: Also use the Transform property of CSS3, set scale (x, y) to achieve 2D scaling conversion of DOM elements, related to Scale3d, ScaleX, ScaleY, Scalez

3. Achieve 3D Picture Rotation album

   Effect:

   
   

   
   Code:

   
   

   Css:

   <style>

           . carousel-container {

               margin:20px Auto;

               width:210px;

               height:140px;

               position:relative;

           }

           #carousel {

               width:100%;

               height:100%;

               Position:absolute;

               transform-style:preserve-3d;

               Animation:rotation 20s infinite linear;

           }

               #carousel: hover {

                   animation-play-state:paused;

               }

               #carousel Figure {

                   Display:block;

                   Position:absolute;

                   width:186px;

                   height:116px;

                   left:10px;

                   top:10px;

                   Background:black;

                   Overflow:hidden;

                   Border:solid 1px black;

               }

                   #carousel Figure:nth-child (1) {

                       Transform:rotatey (0deg) Translatez (288px);

                   }

                   #carousel Figure:nth-child (2) {

                       Transform:rotatey (40deg) Translatez (288px);

                   }

                   #carousel Figure:nth-child (3) {

                       Transform:rotatey (80deg) Translatez (288px);

                   }

                   #carousel Figure:nth-child (4) {

                       Transform:rotatey (120deg) Translatez (288px);

                   }

                   #carousel Figure:nth-child (5) {

                       Transform:rotatey (160deg) Translatez (288px);

                   }

                   #carousel Figure:nth-child (6) {

                       Transform:rotatey (200deg) Translatez (288px);

                   }

                   #carousel Figure:nth-child (7) {

                       Transform:rotatey (240deg) Translatez (288px);

                   }

                   #carousel Figure:nth-child (8) {

                       Transform:rotatey (280deg) Translatez (288px);

                   }

                   #carousel Figure:nth-child (9) {

                       Transform:rotatey (320deg) Translatez (288px);

                   }

               #carousel. carousel-img {

                   -webkit-filter:grayscale (1);

                   Cursor:pointer;

                   Transition:all. 5s ease;

                   Border:none;

               }

                   #carousel. carousel-img:hover {

                       -webkit-filter:grayscale (0);

                       Transform:scale (1.2,1.2);

                   }

           @keyframes Rotation {

               from {

                   Transform:rotatey (0DEG);

               }

               to {

                   Transform:rotatey (360DEG);

               }

           }

       </style>

   Html:

   <p class= "Carousel-container" >

           <p id= "Carousel" >

               <figure></figure>

               <figure></figure>

               <figure></figure>

               <figure></figure>

               <figure></figure>

               <figure></figure>

               <figure></figure>

               <figure></figure>

               <figure></figure>

           </p>

       </p>

   
   Knowledge points: Or with the transform attribute of the CSS3 and the animation attribute, use the Rotatey definition element to rotate 3D along the Y-axis, using the Translatez definition element to perform 3D transformations along the z-axis;
   The animation property of the element is also set to animate, as defined in this article:
   

   
   

   Animation:rotation 20s infinite linear;

   
   Animation-name (need to bind to the keyframe name of the selector): Rotation animation
   Animation-duration (time taken to complete the animation): 20s
   Animation-iteration-count (number of times the animation should be played): Infinite (infinite)
   Animation-timing-function (speed curve of the animation): linear (the speed of the animation is the same from beginning to end)