《前端實戰總結》之使用CSS3實現酷炫的3D旋轉透視

時間 2019-11-21

原文原文鏈接

3D動畫效果如今愈來愈普及，已經被普遍的應用到了各個平臺，好比阿里雲，華爲雲，webpack官網等。它能夠更接近於真實的展現咱們的產品和介紹，帶來極強的視覺衝擊感。因此說，爲了讓本身更加優秀，css3 3D動畫必不可少。javascript

你將學到

CSS3 3D 轉換的經常使用API介紹
CSS3 3D 應用場景
CSS3 3D 實現一個立方體

開始

1.CSS3 3D 轉換的經常使用API介紹

首先先上一張css 3D的座標系：css

接下來咱們來介紹幾個經常使用的api：

旋轉

rotateX()
rotateY()
rotateZ() 以上幾個api分別表明繞x，y，z軸旋轉，以下例子爲繞x軸旋轉的例子：

相關代碼以下：html

<style> .d3-wrap { position: relative; width: 300px; height: 300px; margin: 120px auto; /* 規定如何在 3D 空間中呈現被嵌套的元素 */ transform-style: preserve-3d; transform: rotateX(0) rotateY(45deg); transform-origin: 150px 150px 150px; } .rotateX { width: 200px; height: 200px; background-color: #06c; transition: transform 2s; animation: rotateX 6s infinite; } @keyframes rotateX { 0% { transform: rotateX(0); } 100% { transform: rotateX(360deg); } } </style>
<div class="d3-wrap">
    <div class="rotateX"></div>
</div>
複製代碼

位移（Transform）

translateX(x) 定義 3D 轉化，僅使用用於 X 軸的值
translateY(y) 定義 3D 轉化，僅使用用於 Y 軸的值
translateZ(z) 定義 3D 轉化，僅使用用於 Z 軸的值以上幾個api分別表明相對x，y，z軸的位移，以下例子爲向z軸位移的例子：

這裏咱們須要注意的是爲了能看出位移的效果，咱們須要在父容器上加以下屬性：

.d3-wrap {
    transform-style: preserve-3d;
    perspective: 500;
    /* 設置元素被查看位置的視圖 */
    -webkit-perspective: 500;
}
複製代碼

當爲元素定義 perspective 屬性時，其子元素會得到透視效果，而不是元素自己。代碼以下：前端

.d3-wrap {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 120px auto;
    transform-style: preserve-3d;
    perspective: 500;
    -webkit-perspective: 500;
    transform: rotateX(0) rotateY(45deg);
    transform-origin: center center;
}

.transformZ {
    width: 200px;
    height: 200px;
    background-color: #06c;
    transition: transform 2s;
    animation: transformZ 6s infinite;
}

@keyframes transformZ {
    0% {
        transform: translateZ(100px);
    }
    100% {
        transform: translateZ(0);
    } 
}
複製代碼

3D縮放

scaleX(x) 給定一個 X 軸的3D 縮放轉換值
scaleY(x) 給定一個 Y 軸的3D 縮放轉換值
scaleZ(x) 給定一個 Z 軸的3D 縮放轉換值縮放設置和上面的相似，這裏就不作過多介紹了。

理論上說以上三種常見變換已經夠用了，值得關注的是咱們要想讓元素呈現出3D效果，如下不可忽視的API也很重要：vue

2.CSS3 3D 應用場景

css 3D主要應用在網站的交互和模型效果上，好比：java

3D輪播圖
3D產品介紹
室內3D仿真
h5 3D活動頁面，比較典型的就是某年淘寶的年終總結H5
3D數據可視化成圖
3D模型圖其實若是css 3D用的熟悉了，一些基本的3D模型徹底能夠用css畫出來。

3.CSS3 3D 實現一個立方體

核心思路就是用6個面去拼接，經過設置rotate和translate來調整相互之間的位置，以下：node

具體代碼以下：webpack

.container {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 120px auto;
    transform-style: preserve-3d;
    /* 爲了讓其更有立體效果 */
    transform: rotateX(-30deg) rotateY(45deg);
    transform-origin: 150px 150px 150px;
    animation: rotate 6s infinite;
}
.container .page {
    position: absolute;
    width: 300px;
    height: 300px;
    text-align: center;
    line-height: 300px;
    color: #fff;
    background-size: cover;
}
.container .page:first-child {
    background-image: url(./my.jpeg);
    background-color: rgba(0,0,0,.2);
}
.container .page:nth-child(2) {
    transform: rotateX(90deg);
    transform-origin: 0 0;
    transition: transform 10s;
    background-color: rgba(179, 15, 64, 0.6);
    background-image: url(./my2.jpeg);
}

.container .page:nth-child(3) {
    transform: translateZ(300px);
    background-color: rgba(22, 160, 137, 0.7);
    background-image: url(./my3.jpeg);
}

.container .page:nth-child(4) {
    transform: rotateX(-90deg);
    transform-origin: -300px 300px;
    background-color: rgba(210, 212, 56, 0.2);
    background-image: url(./my4.jpeg);
}
.container .page:nth-child(5) {
    transform: rotateY(-90deg);
    transform-origin: 0 0;
    background-color: rgba(201, 23, 23, 0.6);
    background-image: url(./my5.jpeg);
}
.container .page:nth-child(6) {
    transform: rotateY(-90deg) translateZ(-300px);
    transform-origin: 0 300px;
    background-color: rgba(16, 149, 182, 0.2);
    background-image: url(./my6.jpeg);
}
複製代碼

html結構css3

<div class="container">
    <div class="page">A</div>
    <div class="page">B</div>
    <div class="page">C</div>
    <div class="page">D</div>
    <div class="page">E</div>
    <div class="page">F</div>
</div>
複製代碼

擴展

咱們能夠基於上面介紹的，給父元素添加動畫或者拖拽效果，這樣就能夠作成更有交互性的3D方塊了，好比置骰子游戲，vr場景，3D相冊等等，具體實現我會抽空依次總結出來，記得關注哦～web

最後

若是想了解更多webpack，node，gulp，css3，javascript，nodeJS，canvas等前端知識和實戰，歡迎在公衆號《趣談前端》加入咱們一塊兒學習討論，共同探索前端的邊界。