css3的三D效果transform例項
阿新 • • 發佈:2019-02-01
要用CSS3實現3D效果,先看個圖
perspective設定景深,也就是Z軸的距離。
perspective-origin:設定視角,不同視角看到同一個立體是不同的表現。
設定好這些,就可以構建你想要的,立體圖形,在構建前,構建前生成容器,要讓容器內元素也保持3D效果,就要在樣式新增transform-style: preserve-3d;
定義容器內元素位置,用到transform,tranform屬性很多不多說了,可以查下網站有詳細介紹,這裡主要說兩個屬性:第一rotateZ(val),以Z軸為中心旋轉,val是角度單位deg,例如:rotateZ(90deg),以z軸為中心,旋轉90度。rotateY(),rotateX()也是可疑的就不多說了。第二個,translateZ(val)偏移,這個是沿著Z軸的偏移,val這裡面是距離,比如translateZ(100px)沿Z軸偏移100畫素,當然這裡要設好景深,景深:偏移量,景深一定,偏移量越大效果越明顯,感覺距離很遠,影象拉伸的很厲害。
下面是程式碼例項:
<div class="bgl">
<div class="titlea">
<div>hello</div>
<div>world</div>
<div></div>
</div>
</div>
樣式:例項:http://www.lightconmos.com/test/#/test3這裡動畫設定是視角的左右轉換,不同視角效果不一樣。.bgl{ font-size: 32px; color: green; background-color: black; width: 100%; height: 100vh; perspective: 1000px; perspective-origin: 53% 40%; animation: moveOver 10s linear infinite; } .titlea{ width: 500px; height: 500px; background-color: #4cbbb4; position: absolute; left: 30%; top: 30%; } .titlea>div{ position: absolute; width: 200px; height: 200px; left: 70%; top: 0; font-size: 50px; line-height: 200px; text-align: center; opacity: 0.5; transform-style: preserve-3d; } .titlea>div:nth-child(1){ background-color: red; /*animation: move 10s linear infinite;*/ transform: translateZ(-500px); } .titlea>div:nth-child(2){ background-color: cornflowerblue; transform: rotateX(10deg); /*animation: moveDown 10s linear infinite;*/ } .titlea>div:nth-child(3){ background-color: white; width: 500px; height: 10px; transform: rotateY(90deg) translateX(250px) translateZ(-150px) translateY(100px); } @keyframes move { /*設定動畫關鍵幀*/ 0% { transform: translateZ(-5000px); } 100% { transform: translateZ(1000px); } } @keyframes moveDown { /*設定動畫關鍵幀*/ 0%, 100%{ top:-60%; transform: rotateX(70deg); } 50% { top: 60%; transform: rotateX(-70deg); } } @keyframes moveOver { /*設定動畫關鍵幀*/ 0%, 100%{ perspective-origin: 53% 40%; } 25%{ perspective-origin: 0% 40%; } 50% { perspective-origin: 50% 40%; } 75% { perspective-origin: 100% 40%; } }
參考:http://blog.csdn.net/q1056843325/article/details/53287833