【Transform3D】轉換詳解（看完就會）

文章内包含個人了解，如有錯誤請指出。

前言

教學

坐标軸

移動

旋轉

透視

打開3D空間

總結

案例

3D轉換

3D翻轉

前言

3D可以幫助我們實作更好的頁面動畫效果，我們生活的環境是 3D 的，照片就是 3D 物體在 2D 平面呈現的例子。

有什麼特點

近大遠小
物體後面遮擋不可見

當我們在網頁上建構 3D 效果的時候參考這些特點就能産出 3D 效果。

教學

坐标軸

三維坐标系其實就是指立體空間，立體空間是由3個軸共同組成的。

在x，y軸的基礎上，又增加了一條從外向内的Z軸，

移動

x 軸	水準向右（注意：x 右邊是正值，左邊是負值）
y 軸	垂直向下（注意：y 下面是正值，上面是負值）
z 軸	垂直螢幕（注意：往外面是正值，往裡面是負值）

注意重點：坐标軸原點為圖形的左上角

<style>
#div1
{
  position: relative;
  height: 200px;
  width: 200px;
  margin: 100px;
  padding:10px;
  border: 1px solid black;
  
}

#div2
{
  padding:50px;
  position: absolute;
  border: 1px solid black;
  background-color: red;
  transform: translateX(100px);
    z-index: 1;
  
}
#div3
{
  padding:50px;
  position: absolute;
  border: 1px solid black;
  background-color: red;
  

  
}
</style>
</head>

<body>

<div id="div1">
  <div id="div2">HELLO</div>
  <div id="div3">HELLO</div>
</div>

</body>

左邊的是原位置的，右邊的是移動100px的。

3D 移動在 2D 移動的基礎上多加了一個可以移動的方向，就是 z 軸方向。

transform:translateX(100px)：僅僅是在 X 軸上移動（x軸右邊）
transform:translateY(100px)：僅僅是在 Y 軸上移動（Y軸下邊）
transform:translateZ(100px)：僅僅是在 Z 軸上移動（注意：translateZ 一般用 px 機關，Z軸向外。）
transform:translate3d(x, y, z)：其中 x、y、z 分别指要移動的軸的方向的距離

因為 z 軸是垂直螢幕，由裡指向外面，是以預設是看不到元素在 z 軸的方向上移動（要借助透視）。

旋轉

<style>
#div1
{
  position: relative;
  height: 200px;
  width: 200px;
  margin: 100px;
  padding:10px;
  border: 1px solid black;
  
}

#div2
{
  padding:50px;
  position: absolute;
  border: 1px solid black;
  background-color: green;
  transform: rotateX(100deg);
    z-index: 1;
  
}
#div3
{
  padding:50px;
  position: absolute;
  border: 1px solid black;
  background-color: red;
  

  
}
</style>
</head>

<body>

<div id="div1">
  <div id="div2">HELLO</div>
  <div id="div3">HELLO</div>
</div>

</body>

以x軸旋轉100°，就是向裡旋轉100°，看着變窄了是因為沒有使用透視，繞Z軸旋轉就跟2d旋轉一樣。

transform:rotate3d(0,1,0,45deg) 繞y軸旋轉45°，前三位分别是 xyz ，寫1就是選擇某個坐标軸，第四位寫度數。

矢量旋轉：

transform:rotate3d(1,1,0,45deg) 第四域的對角線旋轉45°。

注意重點：坐标軸原點為圖形的中心點，實際上是由左上角的原點，通過transform-origin:50% 50% ;移動到了圖形的中心點，transform-origin的預設值就是 50% 505 0;我們可以通過transform-origin屬性來改變原點的位置，注意中的注意就是這個屬性隻是改變旋轉的中心點，translate移動的的中心點不變，依然是左上角的。

透視

在 2D 平面産生近大遠小視覺立體，但是效果隻是二維的。

如果想要在網頁産生 3D 效果需要透視（了解成 3D 物體投影在 2D 平面内）
模拟人類的視覺位置，可認為安排一隻眼睛去看
透視我們也稱為視距：視距就是人的眼睛到螢幕的距離
距離視覺點越近的，在電腦平面成像越大，越遠成像越小
透視的機關是像素

我們給之前的3dX旋轉加上透視效果，

<style>
#div1
{
  position: relative;
  height: 200px;
  width: 200px;
  margin: 100px;
  padding:10px;
  border: 1px solid black;
  perspective: 500px;
  
}

#div2
{
  padding:50px;
  position: absolute;
  border: 1px solid black;
  background-color: green;
  transform: rotateX(100deg);
    z-index: 1;
  
}
#div3
{
  padding:50px;
  position: absolute;
  border: 1px solid black;
  background-color: red;
  

  
}
</style>
</head>

<body>

<div id="div1">
  <div id="div2">HELLO</div>
  <div id="div3">HELLO</div>
</div>

</body>

這樣在平面上通過透視産生一種長短大小不一的3d效果。

perspective就相當于人眼到圖像的距離，就相當于你看某個東西，你距離寫的越大，你就站的越遠，物體就越小，站的越近，距離寫的越小，物體越大。

頁面上顯示的就相當于是你看到的物體的投影。

perspective盡可能寫在直接父級上，寫在大于父親級的祖元素上有可能會失靈，但如果搭配transform-style: preserve-3d,兩個一起用，又會起作用。

perspective隻是實作了2d裡的3d視覺顯示，并不是一個3d空間，就比如前面的div向裡傾斜，如果是3d的空間的話那麼會穿透後面的紅色盒子，如何達到真正的3d效果呢就是接下來要說的的屬性。

打開3D空間

transform-style: preserve-3d;

看例子

<style>
        #div1 {
            position: relative;
            height: 200px;
            width: 200px;
            margin: 100px;
            padding: 10px;
            border: 1px solid black;
            perspective: 300px;
            transform-style: preserve-3d;
            transition: all 3s;
        }

        #div1:hover {
            transform: rotateY(-120deg);
        }

        #div2 {
            padding: 50px;
            position: absolute;
            border: 1px solid black;
            background-color: green;
            transform: rotateX(60deg);
            z-index: 1;


        }

        #div3 {
            padding: 50px;
            position: absolute;
            border: 1px solid black;
            background-color: red;



        }
    </style>
</head>

<body>

    <div id="div1">
        <div id="div2">HELLO</div>
        <div id="div3">HELLO</div>
    </div>

</body>

下面是給box盒子加上透視的效果

總結

1.移動的中心點跟旋轉中心點是分開的，transform-origin隻是修改旋轉的原點，移動位置不變依然是左上角。

2.3d旋轉是坐标軸是跟随移動的，是以建議當完成某種效果時，先移動後旋轉，先旋轉改變坐标軸，移動的方向就會有差别。

案例

3D轉換

<style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            margin: 100px;

        }

        ul li {
            width: 120px;
            height: 35px;
            list-style: none;
            float: left;
            margin-left: 10px;
            text-align: center;
            color: white;
        }

        .box {
            position: relative;
            width: 100%;
            height: 100%;
            perspective: 500px;
            transform-style: preserve-3d;
            transition: all 1s;
            line-height: 35px;
        }

        .box:hover {
            transform: rotateX(90deg);
        }

        .front,
        .bottom {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
        }

        .front {
            background-color: pink;
            transform: translateZ(17.5px);
            z-index: 1;
        }

        .bottom {
            background-color: purple;
            transform: translateY(17.5px) rotateX(-90deg);
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <div class="box">
                <div class="front">黑馬程式員</div>
                <div class="bottom">pink老師</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="front">黑馬程式員</div>
                <div class="bottom">pink老師</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="front">黑馬程式員</div>
                <div class="bottom">pink老師</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="front">黑馬程式員</div>
                <div class="bottom">pink老師</div>
            </div>
        </li>
    </ul>
</body>

3D翻轉

<style>
        .box {
            width: 300px;
            height: 300px;
            margin: 100px auto;
            position: relative;
            transition: all 3s;
            transform-style: preserve-3d;
        }

        .box:hover {
            transform: rotateY(180deg);
        }

        .front {
            backface-visibility: hidden;
        }

        .front,
        .back {

            position: absolute;
            left: 0;
            right: 0;
            height: 100%;
            border-radius: 50%;
            color: #fff;
            text-align: center;
            font-size: 30px;
            line-height: 300px;
        }

        .front {
            background-color: pink;
            z-index: 1;
        }

        .back {
            background-color: purple;
            transform: rotate3d(0, 1, 0, 180deg);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="front">黑馬程式員</div>
        <div class="back">pink老師</div>
    </div>
</body>

【Transform3D】轉換詳解（看完就會）

前言

教學

坐标軸

移動

旋轉

透視

打開3D空間

總結

案例

3D轉換

3D翻轉

繼續閱讀

深入CSS vertical-align屬性

給背景圖檔添加超連結

solidworks包覆無法選中浮雕或蝕雕解決方法問題出現的原因

Docker - Docker Volume及Volume指令詳解

去除div的滾動條但是依然可以滾動的方法

modern-normalize vs normalize.css

彈性web UI的核心：媒體查詢

CSS3 ---奔跑的小人

【CSS3】設定超連結樣式超連結樣式

MAVEN配合webfragment

分享幾個常用的css網站前言一、CSS 參考網站二、CSS 參考網站三、CSS集合，自由調節動畫參數，生成代碼片段：五、通過做飯，練習 CSS 選擇器六、送小青蛙回家，學習 flex 布局總結

HTML CSS 的滑鼠懸浮，點選的樣式當滑鼠懸浮時：a:hover當滑鼠點選連結時：a:active

Cesium格式3dtile制作工具

談談css的僞類和僞元素

十大酷炫屌的圖像懸停特效

vue3 transitionvue3 transition元件和vue2 transition元件