Pure Css3 hand-made web page image effects

1. Hover the mouse and the image will rotate 360 ​​degrees

   
   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;

           }

    <br>

               .rotate-demo:hover {

                   -webkit-transform: rotateZ(360deg);

                   -moz-transform: rotateZ(360deg);

                   -o-transform: rotateZ(360deg);

                   -ms-transform: rotateZ(360deg);

                   transform: rotateZ(360deg);

               }

       </style>

    <br>

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

   
   Knowledge point: The transform property of CSS3 can apply 2D or 3D transformation to an element. This property allows us to rotate, scale, move or tilt the element. Set to rotateZ(angle) to implement 3D rotation of DOM elements along the Z axis. Related settings include rotate, rotate3d, rotateX, and rotateY.

2. Hover the picture to enlarge it

   
   
   Effect:

   
   

   

   
   Code:

   
   

   ##

   CSS3：

   <style type="text/css">

       .img-container {

           background-color: #000;

           width: 220px;

           height: 220px;

           margin: 20px 50px;

       }

    <br>

       .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;

       }

    <br>

           .img img {

               padding: 1px;

               border-radius: 10px;

               border: 1px solid #fff;

           }

    <br>

           .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>

    <br>

   HTML：

   <p class="img-container">

               <p class="img">

                   <img src="https://img.php.cn/upload/article/000/000/013/91ad2d958c7d97417c4d740b2c80e27a-0.jpg">

               </p>

           </p>

   Knowledge Point: The transform attribute of CSS3 is also used, and scale(x,y) is set to realize the 2D scaling conversion of DOM elements. Related implementations include scale3d, scaleX, scaleY, and scaleZ
   

3. 3D picture rotation album
   Effect:

   
   

   ##Code:

   
   

   
   

   CSS:

   <style>

           .carousel-container {

               margin: 20px auto;

               width: 210px;

               height: 140px;

               position: relative;

           }

    <br>

           #carousel {

               width: 100%;

               height: 100%;

               position: absolute;

               transform-style: preserve-3d;

               animation: rotation 20s infinite linear;

           }

    <br>

               #carousel:hover {

                   animation-play-state: paused;

               }

    <br>

               #carousel figure {

                   display: block;

                   position: absolute;

                   width: 186px;

                   height: 116px;

                   left: 10px;

                   top: 10px;

                   background: black;

                   overflow: hidden;

                   border: solid 1px black;

               }

    <br>

                   #carousel figure:nth-child(1) {

                       transform: rotateY(0deg) translateZ(288px);

                   }

    <br>

                   #carousel figure:nth-child(2) {

                       transform: rotateY(40deg) translateZ(288px);

                   }

    <br>

                   #carousel figure:nth-child(3) {

                       transform: rotateY(80deg) translateZ(288px);

                   }

    <br>

                   #carousel figure:nth-child(4) {

                       transform: rotateY(120deg) translateZ(288px);

                   }

    <br>

                   #carousel figure:nth-child(5) {

                       transform: rotateY(160deg) translateZ(288px);

                   }

    <br>

                   #carousel figure:nth-child(6) {

                       transform: rotateY(200deg) translateZ(288px);

                   }

    <br>

                   #carousel figure:nth-child(7) {

                       transform: rotateY(240deg) translateZ(288px);

                   }

    <br>

                   #carousel figure:nth-child(8) {

                       transform: rotateY(280deg) translateZ(288px);

                   }

    <br>

                   #carousel figure:nth-child(9) {

                       transform: rotateY(320deg) translateZ(288px);

                   }

    <br>

               #carousel .carousel-img {

                   -webkit-filter: grayscale(1);

                   cursor: pointer;

                   transition: all .5s ease;

                   border: none;

               }

    <br>

                   #carousel .carousel-img:hover {

                       -webkit-filter: grayscale(0);

                       transform: scale(1.2,1.2);

                   }

    <br>

           @keyframes rotation {

               from {

                   transform: rotateY(0deg);

               }

    <br>

               to {

                   transform: rotateY(360deg);

               }

           }

       </style>

    <br>

   HTML:

    <br>

   <p class="carousel-container">

           <p id="carousel">

               <figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/91ad2d958c7d97417c4d740b2c80e27a-1.jpg" alt=""></figure>

               <figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/91ad2d958c7d97417c4d740b2c80e27a-2.jpg" alt=""></figure>

               <figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/91ad2d958c7d97417c4d740b2c80e27a-3.jpg" alt=""></figure>

               <figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/91ad2d958c7d97417c4d740b2c80e27a-4.jpg" alt=""></figure>

               <figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/91ad2d958c7d97417c4d740b2c80e27a-5.jpg" alt=""></figure>

               <figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/2028a2d82c72dc48027911d5df6e0014-6.jpg" alt=""></figure>

               <figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/2028a2d82c72dc48027911d5df6e0014-7.jpg" alt=""></figure>

               <figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/2028a2d82c72dc48027911d5df6e0014-8.jpg" alt=""></figure>

               <figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/2028a2d82c72dc48027911d5df6e0014-9.jpg" alt=""></figure>

           </p>

       </p>

   Knowledge point: Still With the transform attribute and animation attribute of CSS3, use rotateY to define the 3D rotation of the element along the Y axis, and use translateZ to define the 3D transformation of the element along the Z axis;

   At the same time, set the animation attribute of the element to achieve animation effects, as defined in this article As follows:
   
   
   

   
   ##

   animation: rotation 20s infinite linear;

   animation-name (needs to be bound to the selector keyframe name): animation of rotation

   animation-duration (the time it takes to complete the animation): 20s

   animation-iteration-count (the number of times the animation should play): infinite (infinite times)
   animation-timing -function (speed curve of the animation): linear (the speed of the animation is the same from beginning to end)
   
   
   

   For more pure Css3 hand-made web page image effects, please pay attention to the PHP Chinese website for related articles!