一个很酷的3D旋转视角CSS3的最后阶段
在学习反应+ WebPACK，偶然经过WebPACK的官网，看到罗顶，很感兴趣。CSS3最近感觉太弱了，想研究透彻，因此罗为切入口，研究CSS3的相关性质，WebPACK LO动画效果，乍一看是不是很难。经过深入了解，感觉室内真是知识渊博，制定了一系列有关CSS3动画效果。
首先演示，不要把能量放在兼容性上，请用Chrome打开。
这个完整的源代码，和更多的CSS3效果，我可以看到在GitHub上，也希望你可以点一个星。
好吧，也许有些人不能打开演示或页面杂乱，并提出一些图片：（图片有点大，病人正在等待一段时间）。
三维立方体旋转
三维透视相片墙
跳跃的音符
这可能影响主CSS3的蛋糕，一个过程写本文的目的是研究我自己的积累，有兴趣的可以下来看看。
事实上，CSS3效果真的很强大，上述效果是纯CSS，个人的感觉是更深入的学习CSS，更认为我不知道CSS，但另一方面，现实的情况是这些影响，但作为一个追求的前面，我认为有必要采取一些这些属性一看。
所以这篇文章正要谈：
变换方式：preserve-3d 3D效果的角度和原点的三维视距、视角、深度的影响css3filter CSS3过滤器径向渐变透明，透明度和渐变。
变换风格
利用CSS3实现3D效果，最重要的是转变作风attribute.transform-style只有两个值来选择使用：
CSS代码将内容复制到剪贴板。
语法：
变换方式：平| preserve-3d；
转换样式：平面；默认情况下，元素将不保留其三维位置。
变换方式：preserve-3d； / /子元素将保留其三维位置。
属性指定一个容器，当我们变换风格的价值是preserve-3d，容器将3D效果的后代元素，这是一个有点抽象，即父容器设置preserve-3d值，它是元素相对于父元素的平面，操作三维变形。
当父元素的变换风格：preserve-3d设置，可以在三维变形单元操作，变形三维和二维变形可以使用变换属性设置，或者使功能或通过变异操作的三维矩阵的元素：
1、使用translatex（长度），translatey（长度）和translatez（长度）做三维位移操作。像2D操作，我们可以对元素进行位移操作，也可以组合成translate3d（X，Y，Z）。
2、使用scaleX（），称为（），称为（）做3D缩放操作，也可以合并到scale3d（数、数、数）。
3、使用rotatex（角），rotatey（角），rotatez（角）做三维旋转操作，也可以组合成rotate3d（xangle，Yangle，Zangle）。
对于API的研究，我建议看看源码，不要满足别人的消费总结，转换风格API。
这里我们必须具体提出三维坐标轴，所谓的三轴围绕x、y和Z轴。这并不困难。很难想象这个空间很难想象。如果你在API上尝试，你可以通过转动每个轴来理解它。
经过了解，就这样，事实上，我们已经可以做一个立方体了。所谓的实践真知，下面是看如何一步一步地得到立方体。
1。准备六平方
这个好理解，立方体的六个面，第一个div 6，包裹在同一父容器的父容器下面，然后你可以设置变换风格：preserve-3d、三维变换操作的6个方面，为了方便介绍，我用了6种不同的颜色一样的脸：
上面的图是示意性的6个面。当然，我们必须设置6平方厘米作为绝对位置并重叠在一起。
2。父容器的简单转换
为了使最终效果看起来不错，我们需要首先转换父容器，并使用上面提到的旋转属性来改变容器的角度。
CSS代码将内容复制到剪贴板。
立方体容器{
WebKit的变换：rotatex（- 33.5deg）rotatey（45deg）；
变换：rotatex（- 33.5deg）rotatey（45deg）；
}
然后，在转换后，我们得到这样一个数字：
在这个时候，6个div表面仍然是重叠的。
三.对每个表面进行三维变换
下一步是对每个边进行三维变换，旋转可以用来旋转div平面，平移可以用来平移div平面，而且要记住我们现在在三维空间变换，转动啊啊，我们可以得到这样的形状：
计算出旋转角度和偏移距离，将上述6个曲面完美拼接成一个立方体，为了更好的效果，在每个面上增加了一些透明度，最后得到了一个完整的立方体：
为了更立体化，我们可以调整父容器的旋转角度，旋转更立体的角度。
在这一点上，一个3D立方体完成了。在写这篇文章的时候，本来在这里，这个应该结束，但是这里，突然心血来潮，因为立方体可以（立方体），然后四面体，八方或球体也应该能够做到这一点
好了，它没有抑制住不安的心，而是开始尝试并最终做了以下两件事：
关于如何逐步实现这两个方面，没有详细的讨论。如果你有兴趣，你可以去我的github上看源代码，或直接与我讨论。
四面体
和立方体，我们必须先准备4个三角形（详情见下文关于如何利用CSS3制作一个三角形的div），注意4个三角形应该重叠在一起，然后三人沿着70.5度旋转中心的三侧（四面体面对角），你可以得到一个正四面体。
注意，沿三个边缘的中心旋转70.5度意味着每个图形必须有一个旋转中心，也就是说，转换原点属性，它允许我们设置旋转元素的基点。
球
上面的GIF图因为添加了动画，它看起来像一个球的运动，事实上，只有4个div，每个div边界半径：设置为100%圈，然后在中心为基准，每一轮的div在Y轴旋转不同角度，然后让整个圆形容器绕Y轴可以得到这样的效果。
角度和距离原点三维视图，透视 /深度的影响
继续说，3D，下一个属性的角度和观点的起源。
的视角
CSS代码将内容复制到剪贴板。
语法
观点：|没有数；
透视图为元素设置三维透视的距离，仅作用于元素的后代，而不影响元素本身。
简而言之，当元素没有设置透视图时，也就是说，当生成透视图时，没有生成 0，所有的后代元素都在相同的二维平面上压缩，景深也没有影响。
如果你设置透视，你会看到三维度的效果。
视角的起源
透视原点表示三维透视透视的基点位置。默认透视透视中心位于容器中，这是透视的元素，而不是其后代元素的中点，也就是透视原点：50% 50%。
CSS代码将内容复制到剪贴板。
语法
透视原点：x轴Y轴；
x轴：定义视图在x轴上的位置。默认值：50%
y轴：定义视图在y轴上的位置。默认值：50%
值得注意的是，在CSS3的3D变换视角的透视点是在浏览器前。
这是很难理解的，使用上面的测试立方体我们再做一次，我建立了一个立方体的边长50像素，有一箱码垛机内视角100像素，而起源仍为默认视角：
CSS代码将内容复制到剪贴板。
50%看产地：50% WebKit；
透视原点：50% 50%；
WebKit的视角：100px；
观点：100px；
上面的设置，这是当我站在100px的长度看立方体一样，效果如下：
通过调整角度和视角的起源的价值观，能够看到不一样的图形，这是很好理解的，我们观察物体的距离，物体的角度和距离的变化，我们看到的物体是不一样的，想象的小学课文，杨桃和星星，容易理解。
我需要指出的是，上述几个多面体在我面球面数字不加角度值。如果您感兴趣，可以添加并尝试查看效果。
三维透视相片墙
回到文章的开头，3D照片墙我贴，采用变换风格：preserve-3d和角度，可以做一个很好的3D照片墙旋转效应。
代码没有发布，这篇文章已经很长了，只是一个简单的讲述原理，有趣的挑源看看。
1、建立阶段，即旋转图片的容器，设置角度距离他和变换风格：preserve-3d，以便后代能进行三维变换。
2、制备n图片放入容器，N取决于个人的喜好，轮播的3D效果图是类似于钢管舞的旋转运动，它是关于y轴，我们关心的是rotatey大小，根据数量我们添加图片，圆周为360°，每个图片分是的，让每个画面绕Y轴旋转固定角度展开：（这个效果，底我调整角度和透明度）
3，这一次，N地图肯定是巧合叠在一起，所以这里是用translatez的关键一步（长度）的图像翻译沿z轴，是translatez的使用可以使画面更近还是更远，因为在建立不同的rotatey图片的步骤（n），所以设置一个translatez图片，图片很自然的中点为中心展开，这是：
4、最后，利用动画，让我们的阶段，即容器缠绕Y轴旋转图片，（rotatey）。然后旋转木马的3D相片壁效果就完成了。
我们要注意这里的关键是设置的角度值和一个单一的图片translatez值（长度）。角度必须大于translatez值（长度），否则它将相当于在舞台的后面跑，你不会看到效果。