純Css3手作網頁圖片效果

1. 老鼠懸停，圖片360度旋轉

   
   效果：

   
   

   代碼：

   
   

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

   rr 知識點：CSS3 的transform 屬性可以應用2D 或3D 轉換。此屬性允許我們對元素進行旋轉、縮放、移動或傾斜。設定為rotateZ(angle) 實作DOM元素沿著 Z 軸的 3D 旋轉，相關的設定還有rotate、rotate3d、rotateX、rotateY。 圖片懸浮大效果：

   
   

           }

    <br>

            .rotate-demo:hover {

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

   CSS3：

   <style type="text/css">

   

       .img-container {

           background-color: #000;

           width: 220px;

   rr
   

           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>

   知識點： 同樣用到CSS3的transform屬性，設定scale(x,y)，實作知識元素的還有縮放scaleY、scaleZ實現3D圖片旋轉相簿效果: ee

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

   ee
   

               <p class="img">

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

            </p>

3.         </p>

   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;

           }

   ee

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

                   }

   ee

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

   知識點: 還是憑藉CSS3的transform屬性以及animation屬性，使用rotateY定義元素沿著Y 軸的進行3D 旋轉，使用translateZ定義元素沿著Z軸進行3D 轉換；同時設定元素的animation屬性實現動畫效果，本文中定義如下：

                   #carousel figure:nth-child(8) {

   animation-name（需要綁定到選擇器的keyframe 名稱）：rotation 的動畫animation-name（需要綁定到選擇器的keyframe 名稱）：rotation 的動畫animation-du：完成動畫？ animation-iteration-count（動畫應該播放的次數）：infinite（無限次） animation-timing-function(動畫的速度曲線)：linear（動畫從頭到尾的速度是相同的）更多純Css3手作網頁圖片效果 相關文章請關注PHP中文網！