如何使用CSS3實現3D旋轉透視效果

本篇內容介紹了“如何使用CSS3實現3D旋轉透視效果”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

你將學到

• CSS3 3D 轉換的常用API介紹

• CSS3 3D 應用場景

• CSS3 3D 實現一個立方體

開始

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

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

接下來我們來介紹幾個常用的api：

旋轉

• rotateX()

• rotateY()

• rotateZ() 以上幾個api分別代表繞x，y，z軸旋轉，如下例子為繞x軸旋轉的例子：

相關代碼如下：

<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也很重要：

2.CSS3 3D 應用場景

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

• 3D輪播圖

• 3D產品介紹

• 室內3D仿真

• h6 3D活動頁面，比較典型的就是某年淘寶的年終總結H5

• 3D數據可視化成圖

• 3D模型圖 其實如果css 3D用的熟悉了，一些基本的3D模型完全可以用css畫出來。

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

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

具體代碼如下：

.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結構

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

“如何使用CSS3實現3D旋轉透視效果”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！