您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“如何使用CSS3實現(xiàn)3D旋轉(zhuǎn)透視效果”的有關知識,在實際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領大家學習一下如何處理這些情況吧!希望大家仔細閱讀,能夠?qū)W有所成!
你將學到
CSS3 3D 轉(zhuǎn)換的常用API介紹
CSS3 3D 應用場景
CSS3 3D 實現(xiàn)一個立方體
開始
1.CSS3 3D 轉(zhuǎn)換的常用API介紹
首先先上一張css 3D的坐標系:
接下來我們來介紹幾個常用的api:
旋轉(zhuǎn)
rotateX()
rotateY()
rotateZ() 以上幾個api分別代表繞x,y,z軸旋轉(zhuǎn),如下例子為繞x軸旋轉(zhuǎn)的例子:
相關代碼如下:
<style> .d3-wrap { position: relative; width: 300px; height: 300px; margin: 120px auto; /* 規(guī)定如何在 3D 空間中呈現(xiàn)被嵌套的元素 */ 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 轉(zhuǎn)化,僅使用用于 X 軸的值
translateY(y) 定義 3D 轉(zhuǎn)化,僅使用用于 Y 軸的值
translateZ(z) 定義 3D 轉(zhuǎn)化,僅使用用于 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 縮放轉(zhuǎn)換值
scaleY(x) 給定一個 Y 軸的3D 縮放轉(zhuǎn)換值
scaleZ(x) 給定一個 Z 軸的3D 縮放轉(zhuǎn)換值 縮放設置和上面的類似,這里就不做過多介紹了。
理論上說以上三種常見變換已經(jīng)夠用了,值得關注的是我們要想讓元素呈現(xiàn)出3D效果,以下不可忽視的API也很重要:
2.CSS3 3D 應用場景
css 3D主要應用在網(wǎng)站的交互和模型效果上,比如:
3D輪播圖
3D產(chǎn)品介紹
室內(nèi)3D仿真
h6 3D活動頁面,比較典型的就是某年淘寶的年終總結H5
3D數(shù)據(jù)可視化成圖
3D模型圖 其實如果css 3D用的熟悉了,一些基本的3D模型完全可以用css畫出來。
3.CSS3 3D 實現(xiàn)一個立方體
核心思路就是用6個面去拼接,通過設置rotate和translate來調(diào)整相互之間的位置,如下:
具體代碼如下:
.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實現(xiàn)3D旋轉(zhuǎn)透視效果”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實用文章!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。