方法一：（忽略左右两边，保证上下前后四面旋转到前面时都是正的）
步骤一：
一个大盒子包着6个小盒子；
步骤二：
大盒子的宽高和小盒子的一样；
步骤三：
子绝父相，让6个小盒子脱离文档流，叠在一起；
步骤四：
给6个小盒子设置不同背景颜色；
步骤五：
先做上下前后四个面，分别围绕X轴旋转90deg,180deg,270deg,360deg,再继续沿Z轴平移宽度的一半。
步骤六：
再做左右两个面，分别围绕X轴平移小盒子宽的一半（其中一个是反方向），再围绕Y轴旋转90deg.
步骤七：
给父元素加transform-style: preserve-3d;转成3d.
步骤八：
让父元素旋转，查看效果， transform:rotateY(30deg) rotateX(30deg);
步骤九：
给父元素加动画，animation: movie 5s linear infinite;
写规则；@keyframes movie{ form{ transform:rotateY(0deg) rotateX(0deg); } to{ transform:rotateY(360deg) rotateX(360deg); } }
HTML及CSS样式如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>立方体2</title> <style type="text/css"> *{ margin: 0; padding: 0; list-style: none; } ul{ width: 200px; height: 200px; /* border:1px solid black; */ /* box-sizing: border-box; */ margin:200px auto; position:relative; transform-style: preserve-3d; transform:rotateY(30deg) rotateX(30deg); animation: movie 5s linear infinite; } @keyframes movie{ form{ transform:rotateY(0deg) rotateX(0deg); } to{ transform:rotateY(360deg) rotateX(360deg); } } li{ width: 200px; height: 200px; text-align: center; line-height: 200px; position:absolute; left:0; top: 0; opacity:0.5; } ul li:nth-child(1){ background: red; transform: rotateX(90deg) translateZ(100px); } ul li:nth-child(2){ background: yellow; transform: rotateX(180deg) translateZ(100px); } ul li:nth-child(3){ background: green; transform: rotateX(270deg) translateZ(100px); } ul li:nth-child(4){ background: pink; transform: rotateX(360deg) translateZ(100px); } ul li:nth-child(5){ background: blue; transform: translateX(-100px) rotateY(90deg); } ul li:nth-child(6){ background: orange; transform: translateX(100px) rotateY(90deg); } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </body> </html>
