之前学的是react+webpack。 偶然路过webpack官网css球旋转，看到了底部的LOGOcss球旋转，很感兴趣。最近觉得自己的CSS3太弱了，想深入了解一下，所以就以这个LOGO为切入点来学习并研究相关的东西。
之前学的是react+webpack。 偶然路过webpack官网，看到了底部的LOGO，很感兴趣。
最近，我觉得自己的CSS3技能太弱了，想深入了解一下，所以就以这个LOGO为切入点，学习学习相关的CSS3属性。 webpack的LOGO动画效果乍一看并不难。 经过更深入的了解，感觉虽然里面的知识点很多，但是却费了不少周折，做了一系列相关的CSS3动画效果。
先去看demo，不要关注兼容性。 请用chrome打开。
本文的完整代码，以及更多CSS3效果，可以在我的github上看到，希望大家给个star。
好吧，有些人可能无法打开演示或页面混乱。 以下是一些效果图：（图片有点大，请耐心等待）
立方体 3D 旋转
3D透视照片墙
跳跃的音符
也许里面的功能对于精通CSS3的人来说是小菜一碟。 写这篇文章的目的也是我自己学习和积累的一个过程。 如果您有兴趣，可以继续阅读。
事实上CSS3的效果确实很强大。 以上效果都是纯CSS实现的。 我个人感觉CSS研究得越深入，我就越觉得自己不懂CSS。 不过话说回来，这些效果的实际场景并不大，但是作为一个对后端有追求的人，我觉得还是有必要好好了解一下这个属性的。
那么这篇文章接下来要讲的是：
transform-style:preserve-3d 三维效果 透视和透视-origin 3D 观看距离、透视/景深效果 CSS3filter CSS3 滤镜 透明、径向渐变 透明度和渐变
变换风格
用CSS3实现3D效果，最重要的是使用transform-style属性。 transform-style只有两个值可供选择：
CSS 代码将内容复制到剪贴板 //语法：transform-style:flat|preserve-3d; transform-style:flat;//默认情况下，子元素不会保留其3D位置transform-style:preserve-3d;//子元素将保留其3D位置。
当我们将容器的transform-style属性值指定为preserve-3d时，该容器的后代元素将具有3D效果。 这个有点具体，就是当前父容器设置了preserve-3d值后，其子元素就可以相对于父元素所在平面进行3D变形操作。
当父元素设置为transform-style:preserve-3d时，可以对子元素进行3D变形操作。 3D 变形与 2D 变形相同。 它可以使用变换属性来设置，也可以通过公式函数或三维矩阵来设置。 变换元素：
1. 使用translateX(length)、translateY(length)和translateZ(length)执行3D位移操作。 和2D操作一样，对元素进行位移操作，也可以组合成translate3d(x,y,z)；
2、使用scaleX()、scaleY()、scaleY()进行3D缩放操作，也可以将它们组合成scale3d(number,number,number)；
3. 使用rotateX(angle)、rotateY(angle)、rotateZ(angle)进行3D旋转操作，也可以将它们组合成rotate3d(Xangle,Yangle,Zangle)。
对于API学习，我建议你去源头，不要满足于消费别人的总结和转换风格的API。
这里要提的是3D坐标轴，即所谓的围绕X、Y、Z轴的三轴。 这并不难。 如果你觉得很难想象这个空间，尝试按照API并绕每个轴旋转你就会明白。 ：
了解了之后，我们其实可以借助里面所说的来制作一个六面体。 俗话说，实践出真知。 我们来看看如何一步步得到六面体。
1.准备六个正方形
这很容易理解。 立方体有六个面。 首先用div制作6个面，并将它们包裹在同一个父容器下。 父容器设置transform-style:preserve-3d，这样就可以对6个面进行3D 3D处理。 对于变换操作，为了演示方便，我使用了6个不同颜色的面：
上图显示有6张脸。 当然，我们需要将6个正方形div设置为绝对定位并将它们重叠。 那么应该是这样的，只能看到一张脸：
2.父容器进行简单的变换
为了让最终的效果好看，我们需要先对父容器进行变换，利用前面提到的rotate属性来改变容器的角度：
CSS 代码将内容复制到剪贴板。cube-container{ -webkit-transform:rotateX(-33.5deg)rotateY(45deg); 变换：旋转X（-33.5度）旋转Y（45度）； }
然后，经过变换，我们得到这样的图：
嗯，这个时候，六个div面总是重叠的。
3.对各个平面进行3D变换
下一步是在每个平面上执行 3D 变换。 使用rotate来旋转div平面，使用translate来平移div平面。 请记住，现在我们正在三维空间中进行变换。 转啊转，我们可能会得到这样的形状：
计算出旋转角度和偏转距离后，前6个面就可以完美组装成六面体了！ 为了效果更好，我降低了每个面的透明度，最终得到了一个完整的六面体：
为了让它更加立体，我们可以调整父容器的旋转角度，将其旋转到更加立体的角度：
至此，一个3D立方体就完成了。 当我写这篇文章的时候，本节应该到这里就结束了，但是写到这里，我突然突发奇想。 既然立方体可以（正六面体），那么正多面体、正八面体甚至球体都应该可以吗？
好吧，我没有按耐住自己的急躁，立即尝试了一下，最终做出了以下两种：
我不会详细讨论如何一步步完成这两个步骤。 如果有兴趣，可以去我的github看一下源码，或者直接和我讨论交流。 我简单说一下我的想法：
正四面体
和正方体一样，我们首先需要准备4个三角形（下面我们会详细讲解如何用CSS3制作三角形div）。 注意，4个三角形要互相重叠，然后沿着三边的中心点旋转其中的三个。 角度为70.5度（正四面体的面倾角），即可得到正四面体。
注意，“沿三边中心点旋转70.5度”这句话的意思是每个图形都要定位一次旋转中心，这就是transform-origin属性，它可以让我们设置旋转元素的基点位置。
领域
由于添加了动画效果，上面的 GIF 图像看起来像一个移动的球。 事实上，只使用了4个div。 使用border-radius:100%将每个div设置为一个正方形，然后以中心点为基础，绕Y轴旋转每个矩形div不同的角度，然后让整个正方形容器绕Y轴移动，就可以得到这样的效果。
透视和透视原点 3D 观看距离、透视/景深效果
继续 3D，下一个要讨论的属性是透视图和透视图原点。
看法
CSS 代码将内容复制到剪贴板 //语法视角:number|none;
Perspective 设置元素的三维透视距离，仅影响元素的后代，而不影响元素本身。
简单来说，当元素没有设置perspective时，即perspective:none/0时，所有后代元素都被压缩在同一个二维平面上，没有bokeh的效果。
如果你设置视角，你会听到三维效果。
视角原点
Perspective-origin 表示 3D 元素的透视基点位置。 默认的透视中心是容器中透视所在的元素，而不是其后代元素的中点，即perspective-origin: 50% 50%。
CSS代码将内容复制到剪贴板 //语法perspective-origin:x-axisy-axis; //x轴：定义视图在x轴上的位置。 默认值：50% //y 轴：定义视图在 y 轴上的位置。 默认值：50%
值得注意的是CSS3 3D变换中的透视点是在浏览器的前面。
总是很难理解。 让我们用之前制作的立方体来尝试一下。 我将立方体的周长设置为 50 px。 这里我将立方体容器cube-inner的视角设置为100px，而perspective-origin保持默认值。 ：
CSS 代码将内容复制到剪贴板 -webkit-perspective-origin:50%50%; 视角原点：50%50%； -webkit-透视：100px； 视角：100px；
上面的设置相当于我站在100px宽度之外看六面体。 效果如下：
通过调整perspective和perspective-origin的值，可以看到不同的图形。 这很容易理解。 我们观察物体的角度和与物体的距离不断变化，我们看到的物体也不同。 好吧，想象一下中学课文，杨桃和星星，就很容易理解了。
需要指出的是，我所包含的一些常规四面体图形和球形图形不具有透视值。 如果有兴趣的话可以尝试添加一下看看效果。
3D透视照片墙
回到我在文章开头发布的3D照片墙，使用transform-style:preserve-3d和perspective，你可以创建这些非常有效的3D照片墙旋转效果。
我不会发布代码。 这篇文章已经很长了。 我简单说一下原理。 如果有兴趣的话可以去看看源码。
1、设置一个stage，它是一个包裹旋转图像的容器，为其设置透视距离，transform-style:preserve-3d，以便后代可以进行3D变换；
2. 准备N张图片，放入容器内。 N的大小取决于个人喜好。 画面的3D轮播效果类似于钢管舞的旋转，因此是围绕Y轴旋转的。 我们关心的是rotateY的大小。 根据我们要添加图片数量，用360°圆周角将每张图片均等分，即让每张图片绕Y轴旋转固定角度，依次浮动：（下图为效果，我调整了角度和透明度）
3、这时候N张图片肯定是重叠的，所以这里的关键步骤是使用translateZ(length)让图片沿Z轴平移。 也就是说，使用translateZ可以使图片离我们更近或更远。 因为上一步设置了图片不同的rotateY()角度，所以为N张图片设置了translateZ后，图片自然会分散在以中点为圆心的周围，如下所示：
4、最后，我们借助动画，让舞台，也就是包裹图片的容器，绕Y轴向上旋转（rotateY），这样一个类似轮播的3D照片墙的效果就完成了！
这里需要注意的一点是设置的透视值和单张图像的translateZ(length)的值。 透视必须大于translateZ(length)的值，否则就相当于舞台离你而去，你肯定看不到效果。 。
发表评论