最近在复习HTML 和 CSS，把以前做的一些小例子拿出来分享一下，也加深自己的印象
css 是通过 transform 来实现3D旋转的，看代码之前，先复习一下相关知识
transform-origin规定了转换的中心点 ，定义场景，也就是灭点，2D 转换可以设置 x轴和y轴，3D转换还能设置 z轴 语法：transform-origin: x-axis y-axis z-axis;transform-style属性规定如何在 3D 空间中呈现被嵌套的元素。flat 子元素将不保留其 3D 位置。preserve-3d 子元素将保留其 3D 位置。perspective定义 3D 元素距视图的距离perspective-origin定义透视方位，相当于从上下左右那个方向透视，语法 perspective-origin: x-axis y-axis;3D旋转魔方用到了
perspective 给魔方一个透视的距离
transform-style 保留每一个魔方每个面的3D位置
transform-origin 每个魔方面旋转的的基点位置，和整个魔方旋转的基点位置
transform: translate3d(x,y,z) 3D转换
<!DOCTYPE html><html lang="en"><head><title>CSS 3D魔方</title><meta charset="utf-8"></head><style>.bigbox{perspective: 500px;/* 定义场景，灭点为500 */ }.box{margin: 0 auto;margin-top: 200px;width: 200px;height: 200px;background: red;position: relative;transition: all 5s ease;transform-style: preserve-3d; transform-origin: center center 100px;}.box:hover{transform: rotateX(360deg)rotateY(360deg)rotateZ(360deg);}.box div{width: 200px;height: 200px;position: absolute;bottom: 0;right: 0;font-size: 50px;text-align: center;line-height: 200px;}/* top */.box div:nth-child(1){top: -200px;background: rgba(255, 0, 0, 0.5);transform-origin: bottom;transform: rotateX(-90deg)}/* bottom */.box div:nth-child(2){top: 200px;background: rgba(0, 255, 0, 0.5);transform-origin: top;transform: rotateX(90deg)}/* right */.box div:nth-child(3){right: -200px;background: rgba(0, 0, 255, 0.5);transform-origin: left;transform: rotateY(-90deg)}/* left */.box div:nth-child(4){left: -200px;background: rgba(255, 255, 0, 0.5);transform-origin: right;transform: rotateY(90deg)}/* font */.box div:nth-child(5){background: rgba(255, 0, 255, 0.5);transform: translate3d(0, 0, 200px);}/* behind */.box div:nth-child(6){background: rgba(0, 255, 555, 0.5);transform: translate3d(0, 0, 0);}h3{text-align: center;}</style><body><h3>将鼠标移入盒子看3D效果</h3><div class="bigbox"><div class="box"><div>01</div><div>02</div><div>03</div><div>04</div><div>05</div><div>06</div></div></div></body></html>
代码跑一遍，哇塞，想必第一次见到这种效果 ，想来段freestyle
