使用变换效果及动画制作一个立体相册

最新推荐文章于 2024-08-29 14:26:44 发布

V先生137

最新推荐文章于 2024-08-29 14:26:44 发布

阅读量112

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/qq_61739597/article/details/127822249

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
           body {
               perspective: 800px;
           }

           @keyframes Myanimation {
               from {
                   transform: rotatex(0deg) rotatey(0deg) rotatez(0deg);
               }

               to {
                   transform: rotatex(360deg) rotatey(360deg) rotatez(360deg);
               }
           }

           .container {
               width: 200px;
               height: 200px;
               margin: 300px auto;
               position: relative;
               border: 1px solid red;
               transform-style: preserve-3d;
               transform: rotateX(0deg) rotateY(-10deg);
               animation: Myanimation 10s infinite;
           }

           .container>img {
               width: 200px;
               height: 200px;
               position: absolute;

}

           .container:hover>img:nth-child(2) {
               transform: translatex(-200px) rotateY(90deg);
           }

           .container>img:nth-child(2) {
               left: -200px;
               transform: rotateY(90deg);
               transform-origin: right;
           }

           .container:hover>img:nth-child(3) {
               transform: translatex(200px) rotateY(-90deg);
           }

           .container>img:nth-child(3) {
               right: -200px;
               transform: rotateY(-90deg);
               transform-origin: left;
           }

           .container:hover>img:nth-child(4) {
               transform: translateY(-100px) rotatex(-90deg);
           }

           .container>img:nth-child(4) {
               top: -200px;
               transform: rotatex(-90deg);
               transform-origin: bottom;
           }

           .container:hover>img:nth-child(5) {
               transform: translateY(100px) rotatex(-90deg);
           }

           .container>img:nth-child(5) {
               bottom: -200px;
               transform: rotatex(90deg);
               transform-origin: top;
           }

           .container:hover>img:last-child {
               transform: translateZ(100px) ;
           }

           .container>img:last-child {
               transform: translateZ(200px);
               an
           }
           .container:hover>img:first-child {
               transform: translateZ(-100px) ;
           }
       </style>
   </head>
   <body>
       <div class="container">
           <img src="C:\Users\17901\Desktop\web\web第二天作业\1.png" alt="">
           <img src="C:\Users\17901\Desktop\web\web第二天作业\2.png" alt="">
           <img src="C:\Users\17901\Desktop\web\web第二天作业\3.png" alt="">
           <img src="C:\Users\17901\Desktop\web\web第二天作业\4.png" alt="">
           <img src="C:\Users\17901\Desktop\web\web第二天作业\5.png" alt="">
           <img src="C:\Users\17901\Desktop\web\web第二天作业\6.png" alt="">
       </div>
   </body>
</html>