순수한 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;

           }

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

   
   지식 포인트: CSS3의 변환 속성은 2D 또는 3D 변환을 적용할 수 있습니다. 강요. 이 속성을 사용하면 요소를 회전, 크기 조정, 이동 또는 기울일 수 있습니다. Z축을 따라 DOM 요소의 3D 회전을 구현하려면 회전Z(angle)로 설정합니다. 관련 설정에는 회전, 회전3d, 회전X 및 회전Y가 포함됩니다.

2. 이미지를 확대하려면

   
   
   효과:

   
   

   

   
   코드:

   
   

   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>

   지식 요점: DOM 요소의 2D 스케일링 변환을 구현하기 위해 scale(x,y)를 설정하는 CSS3의 변환 속성도 사용됩니다. 관련 구현에는 scale3d, scaleX, scaleY, scaleZ
   

3. 3D가 포함됩니다. 사진 회전 앨범
   효과:

   
   

   코드:
   

   
   

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

           }

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

   지식 포인트: Still With CSS3의 변환 속성과 애니메이션 속성을 사용하여 Y축을 따라 요소의 3D 회전을 정의하고, TranslateZ를 사용하여 Z축을 따라 요소의 3D 변환을 정의합니다.
   동시에 이 문서에 정의된 대로 애니메이션 효과를 얻기 위한 요소의 animation 속성은 다음과 같습니다.
   
   

   
   

       </p>

   animation-name(선택기 키프레임 이름에 바인딩되어야 함): animation of Rotation
   animation-duration(애니메이션을 완료하는 데 걸리는 시간): 20s
   animation-iteration-count ( 애니메이션을 재생해야 하는 횟수): 무한(무제한)
   animation-timing -function(애니메이션의 속도 곡선): 선형(애니메이션의 속도는 처음부터 끝까지 동일함)
   

더 순수한 CSS3 손으로 만든 웹페이지 이미지 효과를 보려면 PHP 중국어 웹사이트의 관련 기사를 주목하세요!