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視覺,也能夠理解爲只要這個`組合體`須要旋轉,就須要這個屬性。

更多的仍是須要結合代碼修改練習,去體會。本文若是有不對之處還請各位指教。感謝！