CSS3 3D学习笔记

时间 2019-12-31

标签 css3 css 3d 学习笔记栏目 CSS 繁體版

原文原文链接

最近学习了CSS3的动画,在这里作一个总结。
如今大部分的交互动画,咱们均可以使用CSS3来完成,效率更高，而且在移动端上的兼容很是好。可是缺乏一种正向编程的快感(我的感受)。javascript

先引出关于3D的几个基本技术点,多的就不说了,这几个也够够的了:java

旋转:rotate、rotateX、rotateY、rotateZ
移动:translate3D、translateX、translateY、translateZ
景深、透视:perspective
3D空间:transform-style:perseve-3d

rotate、rotateX、rotateY、rotateZ 旋转
rotate:编程

transform:rotate(45deg);=>顺时针旋转45度

rotateX:学习

`transform:rotateX(45deg);=>垂直绕着X轴旋转(图片日后倒，你往前扑的方向)，有一个很好玩的形容，就是体操运动员绕着单杠在旋转!!不知道的能够去看一下。

rotateY:动画

transform:rotateY(45deg);=>垂直绕着Y轴逆时针旋转(也就是图片正方向的右肩移动)，也有一个很好玩的形容,就是跳钢管舞。

rotateZ:spa

transform:rotateZ(45deg);=>跟rotate同样。

此时此刻单纯用这几个是没办法看出效果来的,须要借助景深或者叫透视perspecitve来完成。3d

perspective:景深、透视code

perspective:orm

perspective:600px;=>须要加在旋转变形的父容器上,数值越大，至关于离他的距离越大。具体的能够本身去尝试。

在使用景深的时候有一个注意点,在使用translateZ的时候,景深加在一个和本身宽高同样的父容器上的效果和加在一个比本身大的父容器上的效果不同,这是由于景深至关于咱们始终在在父容器的中心点的位置去观看。这个本身去尝试就能明白了。blog

<style>
        .box{
            width: 600px;
            height: 300px;
            border: 1px solid #ccc;
            margin: 100px auto;
            perspective: 500px;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: red;
            transform: translateZ(200px);
        }
        .box2{
            width: 100px;
            height: 100px;
            border: 1px solid #ccc;
            perspective: 500px;
        }
        .box3{
            width: 100px;
            height: 100px;
            /* 背景透明 文字不透明 */
            background-color: rgba(0, 0, 255, .1);
            transform: rotateY(180deg) translateZ(500px);
        }
</style>
<body>
<div class="box">
        <div class="box1"></div>
        <div class="box2">
            <div class="box3"></div>
        </div>
</div>
</body>

咱们所能看到的物体大小,取决于咱们的视野能看到的多少。

<style>
    div.box1{
        perspective:600px;
        //注意景深是加在父元素上的
    }
    div.box2{
        width:100px;
        height:100px;
        background-color:red;
        transform:rotateX(60deg) rotateY(60deg);
        //若是须要多个属性一个用 用空格分开便可。也能够用rotate3D(x,y,z,edg);复合属性
    }
</style>
<body>
    <div class="box1">
        <div calss="box2></div>
    </div>
</body>

translate：移动

translateX:

transform:translateX(100px);=>图片正方向的左边移动100px,也就是咱们的右边不要觉得始终是是数学数轴的X轴方向。会根据图片的正方向来决定的

若是图片rotateX(180deg)旋转了180度,那么图片的正方向发生改变,而且图片此时是背对着咱们的,因此他translateX仍是他的左边移动,可是也是咱们的左边了。

translateY:

transform:translateY(100px);=>图片本身的下方移动100px。也是同样根据本身图片当前的朝向而变化。
若是图片rotateX(180deg)那么图片底部就朝上了(至关于你本身180度旋转了)。那么移动的方向就是咱们看到的往上移动,可是是图片本身的底部。

translateZ:

transform:translateZ(100px);=>至关于往图片本身的正方向冲,也就是你往你的正前方冲了100m,看到的效果就至关于100m处有我的 看着你从0~100米的感受。

同样若是rotateX(180deg) 那么图片就是背对着咱们,那么他的正前方就是咱们的正前方。
translateZ常常使用,而且是结合景深使用的,这里要多理解多练习这两个的配合,把本身当作容器,就好理解多了。这里和perspective配合使用的注意点上面已经写了。结合代码再看看。

transform-style:perseve-3d \ flate

transform-style:perseve-3d;=>其中flat值为默认值，表示全部子元素在2D平面呈现。preserve-3d表示全部子元素在3D空间中呈现。也就是说你要从3D视觉去看这个组合体仍是2D的视觉。好比咱们要作一个魔方的时候就须要用到这个3D视觉,也能够理解为只要这个`组合体`须要旋转,就须要这个属性。

更多的仍是须要结合代码修改练习,去体会。本文若是有不对之处还请各位指教。感谢！