CSS3 3D转换模块-正方体，长方体
正方体1— 这个实现过程中，先平移后旋转，坐标轴不变
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> <style> *{ margin: 0; padding: 0; } ul{ width: 200px; height: 200px; border: 1px solid #000; box-sizing: border-box; margin: 100px auto; position: relative; transform: rotateY(0deg) rotateX(0deg);//给ul增加一个3d效果，下面的效果图都是改变这两个参数值手动f12旋转得到 transform-style: preserve-3d; } ul li{ list-style: none; width: 200px; height: 200px; font-size: 60px; text-align: center; line-height: 200px; position: absolute;//所有的li重叠在ul中 left: 0; top: 0; } ul li:nth-child(1){ background-color: red; transform: translateX(-100px) rotateY(90deg);//因为要绕正方体中心轴旋转，所以先沿x轴向左移动边长的一半，之后绕y轴转90度，形成左面 } ul li:nth-child(2){ background-color: green; transform: translateX(100px) rotateY(90deg);//形成右面 } ul li:nth-child(3){ background-color: blue; transform: translateY(-100px) rotateX(90deg);//形成上面 } ul li:nth-child(4){ background-color: yellow; transform: translateY(100px) rotateX(90deg);//形成下面 } ul li:nth-child(5){ background-color: purple; transform: translateZ(-100px);//形成前面 } ul li:nth-child(6){ background-color: pink; transform: translateZ(100px);//形成后面 } </style>如果注释掉li3-6，f12改动ul的rotateY(0deg)值，从0到180度，效果如下：
综合之后，六个面写全，则效果图如下：
正方体2— 下面这个实现过程中，先旋转后平移，坐标轴根据旋转改变方向
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> <style> *{ margin: 0; padding: 0; } ul{ width: 200px; height: 200px; border: 1px solid #000; box-sizing: border-box; margin: 100px auto; position: relative; transform: rotateY(0deg) rotateX(0deg); transform-style: preserve-3d; } ul li{ list-style: none; width: 200px; height: 200px; font-size: 60px; text-align: center; line-height: 200px; position: absolute; left: 0; top: 0; } ul li:nth-child(1){ background-color: red; transform: rotateX(90deg) translateZ(100px);//先旋转后平移，坐标轴随之旋转 } ul li:nth-child(2){ background-color: green; transform: rotateX(180deg) translateZ(100px);//先旋转后平移，坐标轴随之旋 } ul li:nth-child(3){ background-color: blue; transform: rotateX(270deg) translateZ(100px);//先旋转后平移，坐标轴随之旋 } ul li:nth-child(4){ background-color: yellow; transform: rotateX(360deg) translateZ(100px);//先旋转后平移，坐标轴随之旋 } ul li:nth-child(5){//5和6是左右两个面 background-color: purple; transform: translateX(-100px) rotateY(90deg); } ul li:nth-child(6){ background-color: pink; transform: translateX(100px) rotateY(90deg); } </style>解释说明：
坐标轴旋转
以1为例
效果图
长方体
正方体变长方体，只需要在1~4的ul li:nth-child(i)中的transform属性后面添加scale(2, 1)即可，这个属性意为拉伸。如下：
ul li:nth-child(1){ background-color: red; transform: rotateX(90deg) translateZ(100px) scale(2, 1); }在5和6中设置如下：
ul li:nth-child(5){ background-color: purple; transform: translateX(-200px) rotateY(90deg); } ul li:nth-child(6){ background-color: pink; transform: translateX(200px) rotateY(90deg); }手动f12改变ul中绕x轴旋转效果：
长方体无限自动循环
<body> <ul> <li><img src="images/banner1.png" alt=""></li> <li><img src="images/banner2.jpg" alt=""></li> <li><img src="images/banner3.jpg" alt=""></li> <li><img src="images/banner4.jpg" alt=""></li> <li></li> <li></li> </ul> </body> <style> *{ margin: 0; padding: 0; } body{ /*想看到整个立方的近大远小效果, 就给ul的父元素添加透视*/ perspective: 500px; } ul{ width: 200px; height: 200px; box-sizing: border-box; margin: 100px auto; position: relative; transform: rotateY(0deg) rotateX(0deg); transform-style: preserve-3d; animation: sport 5s linear 0s infinite normal; } ul li{ list-style: none; width: 200px; height: 200px; font-size: 60px; text-align: center; line-height: 200px; position: absolute; left: 0; top: 0; } ul li:nth-child(1){ background-color: red; transform: rotateX(90deg) translateZ(100px) scale(2, 1); } ul li:nth-child(2){ background-color: green; transform: rotateX(180deg) translateZ(100px) scale(2, 1); } ul li:nth-child(3){ background-color: blue; transform: rotateX(270deg) translateZ(100px) scale(2, 1); } ul li:nth-child(4){ background-color: yellow; transform: rotateX(360deg) translateZ(100px) scale(2, 1); } ul li:nth-child(5){ background-color: purple; transform: translateX(-200px) rotateY(90deg); } ul li:nth-child(6){ background-color: pink; transform: translateX(200px) rotateY(90deg); } ul li img{ /* 注意点: 只要父元素被拉伸了,子元素也会被拉伸 */ width: 200px; height: 200px; } @keyframes sport { from{ transform: rotateX(0deg); } to{ transform: rotateX(360deg); } } </style>