transform-style: preserve-3d

属性规定如何在 3D 空间中呈现被嵌套的元素，有flat和preserve-3d两种参数，默认为flat表示子元素将不保留3d位置（注意只有子元素会实现3d效果），preserve-3d相反（理解为设置后元素之间的覆盖关系将不会根据出生先后以及z-index等影响，而是通过立体几何的3d关系决定覆盖关系，且未设置时，旋转将会是只旋转覆盖关系的最后一个元素即只看见一个面的旋转）。

perspective

定义 3D 元素距视图的距离，以像素计。该属性允许改变 3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时，其子孙元素会获得透视效果，而不是元素本身，子孙元素重复时，以孙元素为主。指定了观察者与z=0平面的距离，使具有三维变换的元素产生透视效果（理解为眼睛距离浏览器屏幕的距离，在设置元素的中心向外，这里用一个别人的例子比如一个1680像素宽的显示器中有张美女图片，应用了3D transform，同时，该元素或该元素父辈元素设置的perspective大小为2000像素。则这张美女多呈现的3D效果就跟你本人在1.2个显示器宽度的地方(1680*1.2≈2000)看到的真实效果一致！，下图为设置父集perspective为1000px，子集有高600px的图片、translateZ为300px即z轴方向向外移动300px时，屏幕中图片显示为857.14的像素原因）。

perspective-origin

定义 3D 元素所基于的 X 轴和 Y 轴（需要搭配perspective使用，无法单独使用）。该属性允许改变 3D 元素的底部位置。当定义perspective -Origin属性时，会调整子孙元素的perspective而不是元素本身。实质上为元素变形的原点，默认值为 50% 50% ，该数值和后续提及的百分比默认均基于元素自身的宽高算出具体数值（在数值不是特别高的情况下即一般情况下，可以简单理解为眼睛位置的x、y方向定位，是以设置元素的左上角定点为0,0点，不设置时默认50%50%，即相当于眼睛在该元素中心点的z轴位置上，比如正对一个正方体，我们只能看得到它一个面时，当第一个参数大于50%+n时，我们就可以看见该正方体的右侧面，相当于眼睛向右侧移动了，当第二个参数大于50%+n时，我们就可以看见该正方体的底面，相当于眼睛向下侧移动了，按道理n应该为0.5但实际为0.5~0的一个值）。

rotate

如图我们首先要理解计算机的空间坐标系，它是以元素的中心（图中大的正方形可比作元素）建立x、y轴（和定位absolute中的x，y轴相同），z轴理解为从屏幕指向眼睛的方向，传入度数值，表示绕X或Y或Z轴旋转，其中绕x轴旋转时，+Z向-Y方向为正方向，绕y轴旋转时，+z向+x方向为正方向，绕z轴旋转时，-Y向+X方向。注意设置时的无先后顺序，例如rotateX(30px) translateX(30deg)和translateX(30deg) rotateX(30px)是两个不同的位置，且选择的解释也不同，第一种的旋转是先translate后绕原先的X轴rotate，第二种是绕translate后绕自身的X轴旋转（原点也经过了translateX）；然后子元素经过了translate后，其父元素的旋转绕的轴是原始的轴（不是自身的），即rotateX（30deg） rotateY（30deg）和rotateY（30deg） rotateX（30deg）可能表示一个位置，也可能表示不同位置，在于子元素是否该变了图形的位置。一定要注意，不然搞了贼久还以为其它的属性出了问题，写的时候最好就要注意好顺序，不同的写法顺序不同，rotateX(30deg)

translate

空间坐标系同上，也是分别表示向3个方向平移的像素，这里再次强调一下上面的重点：rotateX(30px) translateX(30deg)和translateX(30deg) rotateX(30px)是两个不同的位置，且旋转的解释也不同，第一种的旋转是先translate后绕原先的X轴rotate，第二种是先translate后绕自身的X轴旋转（原点也经过了translateX）；然后子元素经过了translate后，其父元素的旋转绕的轴是原始的轴（不是自身的），即rotateX（30deg） rotateY（30deg）和rotateY（30deg） rotateX（30deg）可能表示一个位置，也可能表示不同位置，在于子元素是否该变了图形的位置。

纯CSS3动画正方体贴图小项目链接和GIF图片

每月两个小小项目——CSS3立体正方体贴图旋转动画_AIWWY的博客-CSDN博客

CSS3中perspective、perspective-origin、transform-style: preserve-3d和transform中的rotate详细解释、纯CSS3动画正方体贴图相关推荐

以下关于程序设计语言的叙述中，不正确的是（）【最全！最详细解释！！】
以下关于程序设计语言的叙述中,不正确的是() A. 脚本语言不使用变量和函数 B. 标记语言常用描述格式化和链接 C. 脚本语言采用解释方式实现 D. 编译型语言的执行效率更高解释: 编程语言:是用 ...
matlab中的dsolve函数是用来解决什么问题的？请详细解释并给我几个简单的例子...
"dsolve" 函数是 MATLAB 中用于解决微分方程的函数.它的目的是解决一阶或多阶常微分方程的解析解,并且可以对解进行可视化. 下面是几个简单的例子: 一阶常微分方程:dy ...
css3控制html中图片,精选4款用纯CSS3绘制的有趣图形
今天我们要来分享一些设计非常独特的人物和动物动画效果,它们都是通过HTML5和CSS3制作而成,有一些动画是利用纯CSS3实现的,一起来看看. 1.纯CSS3绘制可爱的蚱蜢今天我们要分享一个利用纯C ...
炫酷的css3动作源码,8 个超炫酷的纯 CSS3 动画及源码分享
在现代网页中,我们已经越来越习惯使用大量的CSS3元素,而现在的浏览器也基本都支持CSS3,所以很多时候我们不妨思考一下是否可以用纯CSS3制作一些有趣或者实用的网页.本文要分享8个超炫酷的纯CSS3 ...
html52D转换3D,CSS3 Transform 2D和3D转换
1.2 缩放语法transform : scale(x,y); -webkit-transform : scale(x,y); 根据倍数来缩放,取决于宽度(X轴)和高度(Y轴)的参数:也可以用一个参 ...
CSS3新特性详解(三)：CSS3 2D转换和3D转换 transform 变形使用详解
关于CSS3新特性,在上篇博文中"CSS3新特性详解(二):CSS3 字体@font-face详解.如何创建和修改woff字体文件及text-shadow等文本效果",讨论了C ...
CSS3 2D和3D转换 Transform
Transform 适应于对任一DOM元素的2D或3D转换,这些转换效果有:旋转(rotate).拉伸(scale).平移(move).倾斜(skew)等,利用Transform和javascript ...
在html中选项卡怎么做,纯css3制作选项卡
继上一篇文章后,突发奇想利用纯粹的css3和radio的特性来打造一个选项卡切换的效果普通的选项卡效果一般分为html+css+js来制作步骤如下: html做布局 css做样式 js添加切换效果 ...
重新想象 Windows 8 Store Apps (52) - 绑定: 与 Element Model Indexer Style RelativeSource 绑定, 以及绑定中的数据转换...
重新想象 Windows 8 Store Apps (52) - 绑定: 与 Element Model Indexer Style RelativeSource 绑定, 以及绑定中的数据转换原文: ...

CSS3中perspective、perspective-origin、transform-style: preserve-3d和transform中的rotate详细解释、纯CSS3动画正方体贴图