CSS制作立方体

最新推荐文章于 2022-09-19 13:27:52 发布

dream_autumn

最新推荐文章于 2022-09-19 13:27:52 发布

阅读量167

点赞数

分类专栏： CSS 文章标签： 3D转换 CSS制作立方体

本文链接：https://blog.csdn.net/dream_autumn/article/details/80142277

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>

       <style>
           ul{
               width: 300px;
               height: 300px;
               border: 1px solid #000000;
               box-sizing: border-box;
               margin: 100px auto;
               position: relative;
               transform-style: preserve-3d;
               transform: rotateX(0deg) rotateY(0deg);
           }

           ul li{
               width: 300px;
               height: 300px;
               /*background: blue;*/
               position: absolute;
               top: 0px;
               left: 0px;
               list-style: none;
           }

           li:nth-child(1){
               transform: translate(-100px) rotateY(90deg);
               background: blueviolet;
           }

           li:nth-child(2){
               transform: translate(100px) rotateY(90deg);
               background: yellow;
           }

           li:nth-child(3){
               transform: translateY(100px) rotateX(90deg);
               background: greenyellow;
           }

           li:nth-child(4){
               transform: translateY(-100px) rotateX(90deg);
               background: orangered;
           }

           li:nth-child(5){
               transform: translateZ(100px) rotateZ(90deg);
               background: lightblue;
           }

           li:nth-child(6){
               transform: translateZ(-100px) rotateZ(90deg);
               background: lightcoral;
           }
       </style>
   </head>
   <body>
       <ul>
           <li></li>
           <li></li>
           <li></li>
           <li></li>
           <li></li>
           <li></li>
       </ul>
   </body>
</html>

效果图：