html+css立方体特效

最新推荐文章于 2024-01-04 22:28:58 发布

让代码飞1926

最新推荐文章于 2024-01-04 22:28:58 发布

阅读量496

点赞数

分类专栏： Html css 文章标签： css

本文链接：https://blog.csdn.net/qq_40596257/article/details/99851959

版权

Html 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

css

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>长方体特效</title>
       <style type="text/css">
           ul{
               width: 600px;
               height: 560px;
               list-style: none;
               position: relative;
               margin: 0 auto;
               transform: rotateX(0deg)rotateY(30deg);
               transform-style: preserve-3d;
               animation: zz 10s infinite;
           }
           @keyframes zz{
               0%{transform: rotateX(0deg) rotateY(0deg);}
               25%{transform: rotateX(0deg) rotateY(360deg);}
               50%{transform: rotateX(0deg) rotateY(0deg);}
               100%{transform: rotateX(360deg) rotateY(0deg);}
           }
           .front>img{
               width: 100%;
               height: 100%;
           }
           .behind>img{
               width: 100%;
               height: 100%;
           }
           .left>img{
               width: 100%;
               height: 100%;
           }
           .right>img{
               width: 100%;
               height: 100%;
           }
           .top>img{
               width: 100%;
               height: 100%;
           }
           .bottom>img{
               width: 100%;
               height: 100%;
           }
           .left{
               width: 200px;
               height: 200px;
               transform: rotateY(-90deg) translateZ(100px);
               background-color: red;
               position: absolute;
               left: 100px;
               top: 150px;
           }
           .right{
               width: 200px;
               height: 200px;
               transform: rotateY(90deg) translateZ(100px);
               background-color: blue;
               position: absolute;
               right: 140px;
               top: 150px;
           }
           .front{
               width: 400px;
               height: 200px;
               transform: translateZ(100px);
               background-color: sandybrown;
               position: absolute;
               left: 100px;
               top: 150px;
           }
           .behind{
               width: 400px;
               height: 200px;
               transform: translateZ(-100px);
               background-color: brown;
               position: absolute;
               left: 100px;
               top: 150px;
           }
           .top{
               width: 400px;
               height: 200px;
               background-color: green;
               transform: rotateX(90deg);
               position: absolute;
               top: 50px;
               left: 100px;
           }
           .bottom{
               width: 400px;
               height: 200px;
               background-color: cornflowerblue;
               transform: rotateX(90deg);
               position: absolute;
               left: 100px;
               top: 250px;
           }
       </style>
   </head>
   <body>
       <ul>
           <li class="front"><img src="img/qian.jpg" ></li>
           <li class="behind"><img src="img/1.jpg" ></li>
           <li class="top"><img src="img/shang.jpg" ></li>
           <li class="bottom"><img src="img/xia.jpg" ></li>
           <li class="left"><img src="img/you.jpg" ></li>
           <li class="right"><img src="img/zuo.jpg" ></li>
       </ul>
   </body>
</html>

让代码飞1926

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
html+css立方体特效

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>长方体特效</title> <style type="text/css"> ul{ ...
复制链接

扫一扫