web前端开源小案例:立方体旋转

HTML部分：

1

2

3

4

5

6

CSS:

1.3维空间图

电脑屏幕中心为原点，横向为X轴，纵向为Y轴，人脸的方向为Z轴；

translate(x,y)、translateX(x)、translateY(y)、translateZ(z)、translate3d(x,y,z)：定义位置的移动距离

rotate(angle)、rotateX(a)、rotateY(a)、rotateZ(a)、rotate3d(x,y,z,angle)：定义元素的旋转角度。

2.perspective属性

perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。

当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

注释：perspective 属性只影响 3D 转换元素。

提示：请与 perspective-origin 属性一同使用该属性，这样您就能够改变 3D 元素的底部位置。

3.transform-style属性

transform-style: flat

preserve-3d; 默认值为flat,表示子元素以2D平面呈现；perserve-3d表示子元素以3D平面呈现

4.transform-origin属性

transform-origin 属性允许您改变被转换元素的位置（可以理解为元素以哪个位置为旋转原点）。

语法：

transform-origin: x-axis y-axis z-axis;

如果对你有帮助，麻烦点一下赞，并关注一下本部落，也可以推荐身边爱前端的伙伴关注本部落，大家一起学习和成长！！！

前端学习官方部落群：120342833