CSS代码：

*{margin: 0;padding: 0;}#box{width: 200px;height: 200px;position: relative;left: 200px;top: 200px;transition: 5s all;transform-origin: center;perspective: 1000;   /* 透视 眼睛距离屏幕的距离 */transform-style: preserve-3d; /* 创建一个3d 环境*/}#box:hover{transform: rotateY(360deg);}#box>div{width: 200px;height: 200px;position: absolute;text-align: center;line-height: 200px;color: white;font-size: 60px;}.one{background-color: black;}.two{background-color: orange;transform-origin: left;transform: rotateY(90deg);}.three{background-color: lightslategray;transform: translateZ(-200px);}.four{background-color: aquamarine;transform-origin: right;transform: rotateY(-90deg);}.five{transform-origin: top;background-color: blueviolet;transform: rotateX(-90deg);}.six{transform-origin: bottom;background-color: saddlebrown;transform: rotateX(90deg);}

JS代码：

<div id=\"box\"><div class=\"one\">1</div><div class=\"two\">2</div><div class=\"three\">3</div><div class=\"four\">4</div><div class=\"five\">5</div><div class=\"six\">6</div></div>

效果如下：