css3旋转属性，css3旋转怎么做
要玩转css3的3d，就必须了解几个词汇，便是透视(perspective)、旋转(rotate)和移动(translate)。透视即是以现实的视角来看屏幕上的2D事物，从而展现3D的效果。旋转则不再是2D平面上的旋转，而是三维坐标系的旋转，就包括X轴，Y轴，Z轴旋转。平移同理。
下面是3个gif：
沿着X轴旋转
沿着Y轴旋转
沿着Z轴旋转
旋转应该没问题了，那理解平移起来就比较容易了，就是在在X轴、Y轴、z轴移动。
你可能会说透视比较不好理解，下面我介绍一下透视的几个属性。
perspective
perspective英文名便是透视，没有这东西就没办法形成3D效果，但是这个东西是怎么让我们浏览器形成3D 效果的呢，可以看下面这张图，其实学过绘画的应该知道透视关系，而这里就是这个道理。
但是在css里它是有数值的，例如perspective: 1000px这个代表什么呢？我们可以这样理解，如果我们直接眼睛靠着物体看，物体就超大占满我们的视线，我们离它距离越来越大，它在变小，立体感也就出来了是不是，其实这个数值构造了一个我们眼睛离屏幕的距离，也就构造了一个虚拟3D假象。
perspective-origin
由上面我们了解了perspective，而加上了这个origin是什么，我们前面说的这个是眼睛离物体的距离，而这个就是眼睛的视线，我们的视点的不同位置就决定了我们看到的不同景象，默认是中心，为perspectice-origin: 50% 50%,第一个数值是 3D 元素所基于的 X 轴，第二个定义在 y 轴上的位置
当为元素定义 perspective-origin 属性时，其子元素会获得透视效果，而不是元素本身。必须与 perspective 属性一同使用，而且只影响 3D 转换元素。(W3school)
transform-style
perspective又来了，没错，它是css中3D的关键，transform-style默认是flat，如果你要在元素上视线3D效果的话，就必须用上transform-style: preserve-3d,否则就只是平面的变换，而不是3D的变换
手把手带你玩转css3-3d
以上我们稍微了解概念，下面就开始实战吧！
我们看一个效果，是不是很酷炫~
第一步：html结构
很简单的一个容器包裹着一个装了6个piece的piece-box
第二步： 加上必要的3D属性，进入3D世界
通过上面的讲解，应该对perspective比较熟悉了吧,
本文地址：IT问答频道 https://www.hkm168.com/itwenda/903300.html，易企推百科一个免费的知识分享平台，本站部分文章来网络分享，本着互联网分享的精神，如有涉及到您的权益，请联系我们删除，谢谢！
相关阅读
