旋转立方体

最新推荐文章于 2024-08-29 11:31:37 发布

qq_53465276

最新推荐文章于 2024-08-29 11:31:37 发布

阅读量63

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_53465276/article/details/121366722

版权

<head>
   <title></title>
   <style>
       .lifangPic {
   position: relative;
   perspective: 2000px;
   }
   .container {
   width: 400px;
   height: 400px;
   transform-style: preserve-3d;
   transform-origin: 50% 50% 100px;
   top: 100px;
   }
   .box {
   width: 200px;
   height: 200px;
   position: absolute;
   background: #000;
   line-height: 200px;
   text-align: center;
   color: #fff;
   font-size: 30px;
   font-weight: bold;
   }
   .box img {
       width: 100%;
       height: 100%;
   }
   .top {
   left: 100px;
   top: -100px;
   transform: rotateX(-90deg);
   transform-origin: bottom;
   background: red;
   }
   .bottom {
   left: 100px;
   bottom: -100px;
   transform: rotateX(90deg);
   transform-origin: top;
   background: grey;
   }
   .left {
   left: -100px;
   bottom: 100px;
   transform: rotateY(90deg);
   transform-origin: right;
   background: green;
   }
   .right {
   left: 300px;
   bottom: 100px;
   transform: rotateY(-90deg);
   transform-origin: left;
   background: yellow;
   }
   .front {
   left: 100px;
   top: 100px;
   transform: translateZ(200px);
   background: black;
   }
   .back {
   left: 100px;
   top: 100px;
   transform: translateZ(0);;
   background: blue;
   }
   @keyframes rotate-frame {
   0% {
   transform: rotateX(0deg) rotateY(0deg);
   }
   10% {
   transform: rotateX(0deg) rotateY(180deg);
   }
   20% {
   transform: rotateX(-180deg) rotateY(180deg);
   }
   30% {
   transform: rotateX(-360deg) rotateY(180deg);
   }
   40% {
   transform: rotateX(-360deg) rotateY(360deg);
   }
   50% {
   transform: rotateX(-180deg) rotateY(360deg);
   }
   60% {
   transform: rotateX(90deg) rotateY(180deg);
   }
   70% {
   transform: rotateX(0) rotateY(180deg);
   }
   80% {
   transform: rotateX(90deg) rotateY(90deg);
   }
   90% {
   transform: rotateX(90deg) rotateY(0);
   }
   100% {
   transform: rotateX(0) rotateY(0);
   }
   }
   .container{
   animation: rotate-frame 30s linear infinite;
   }
   </style>
</head>
<body>
   <div class="lifangPic">
   <div class="container">
   <div class="top box"><img src="image/one.webp"></div>
   <div class="bottom box"><img src="image/two.jpg"></div>
   <div class="left box"><img src="image/three.jpg"></div>
   <div class="right box"><img src="image/four.jpg"></div>
   <div class="front box"><img src="image/five.jpg"></div>
   <div class="back box"><img src="image/six.webp"></div>
   </div>
</div>
</body>

qq_53465276

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
旋转立方体

<head> <title></title> <style> .lifangPic { position: relative; perspective: 2000px; } .container { width: 400px; height: 400px; transform-s...
复制链接

扫一扫