CSS3 3D学习笔记

最近学习了CSS3的动画,在这里做一个总结。
现在大部分的交互动画,我们都可以使用CSS3来完成,效率更高，并且在移动端上的兼容非常好。但是缺少一种正向编程的快感(个人感觉)。

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

旋转: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:

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

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

perspective:景深、透视

perspective:

perspective:600px;=>需要加在旋转变形的父容器上,数值越大，相当于离他的距离越大。具体的可以自己去尝试。

在使用景深的时候有一个注意点,在使用translateZ的时候,景深加在一个和自己宽高一样的父容器上的效果和加在一个比自己大的父容器上的效果不一样,这是因为景深相当于我们始终在在父容器的中心点的位置去观看。这个自己去尝试就能明白了。

<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>

CSS3 3D学习笔记

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

<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视觉,也可以理解为只要这个`组合体`需要旋转,就需要这个属性。

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

CSS3 3D学习笔记

相关推荐