[CSS]一起来画立方体: CSS transform属性

在学习transition, transform和translate这三个属性的时候，发现了一个例子包括了以下几个属性，觉得挺有意思，对学习这三个属性也很有帮助。

• transform
• translate
• rotate
• perspective
• perspective-origin

先看看MDN上一个CSS属性 perspective 的一个例子
https://developer.mozilla.org/zh-CN/docs/Web/CSS/perspective-origin

  

    
1
    
2
    
3
    
4
    
5
    
6
  

效果图：

立方体.png

这个例子是HTML+CSS画出来的一个正方体，它是怎么做的呢？

HTML代码非常简单，一个container装了一个cube，这个cube有6个face。

CSS部分，每个face都是100×100 px的正方形，每个face的transform属性不一样，由不同的translate和rotate的值组成。尝试把每个face的transform属性去掉，来看看效果。

把transform属性去掉后的效果.png

6个面堆叠在一起了，由些可见，正方体就是6个平面正方形经过旋转和平移，构成一个正方体，这个我们实际的操作也很一致。

先来看看立体的x y z坐标系：

坐标系.png

结合坐标系：

1. 正面front：把正方形沿z轴平移50px

transform: translateZ(50px);

2. 背面back：把正方形沿z轴平移50px，并以y轴旋转顺时针180度

transform: rotateY(180deg) translateZ(50px);

3. 右面right：把正方形沿z轴平移50px，并以y轴旋转顺时针90度

transform: rotateY(90deg) translateZ(50px);

4. 左面left：把正方形沿z轴平移50px，并以y轴逆时针旋转90度

transform: rotateY(-90deg) translateZ(50px);

5. 上面top：把正方形沿z轴平移50px，并以x轴顺时针旋转90度

transform: rotateX(90deg) translateZ(50px);

6. 底面bottom：把正方形沿z轴平移50px，并以x轴逆时针旋转90度

transform: rotateX(-90deg) translateZ(50px);

只看概念是不是还是有点难想象呢？这时候，我们可以加上transition属性，用动画效果还帮我们看看。

每一个face加一个触发事件，加上"transition : '2s'"

添加button.png

依次点击每个button，可以看到face从开始的位置变换到正方体的位置。transiton的作用就是给一个2s的时间，让我们看到变化的过程。

效果.png

完整代码

  

    
1
    
2
    
3
    
4
    
5
    
6
  

Front
Back
Right
Left
Top
Bottom

总结一下，rotate和translate都是transform的子属性，后面加上X Y Z代表以x轴、y轴、z轴为基础旋转/平移。

• transform: CSS变换函数，可以旋转，缩放，倾斜或平移给定元素。
  • rotate：正数时顺时针旋转，负数时逆时针旋转
  • translate: 正数时正方向平移，负数时反方向平移
• transition: CSS过渡函数

另外，perspective属性：[CSS]一起来画立方体: CSS perspective属性

参考：
https://www.w3.org/TR/css-transforms-2
https://drafts.csswg.org/css-transitions
https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform
https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition