資訊專欄INFORMATION COLUMN
摘要：動畫前言最近玩了玩用來構建效果，寫了幾個，所以博客總結一下。寫一個簡單的立方體我們先用實現一個長方體，一個長方體有個邊，我們寫個，并用一個包裹起來根據我寫動畫的經驗，最好有一個父元素來包裹先給設置寬高，并且給他設置視距和基點位置。
css3D動畫 前言
最近玩了玩用css來構建3D效果，寫了幾個demo，所以博客總結一下。 在閱讀這篇博客之前，請先自行了解一下css 3D的屬性，例如：transform-style，transform-origin，transform, perspective。
寫一個簡單的立方體
1、我們先用css實現一個長方體，一個長方體有6個邊，我們寫6個li，并用一個ul包裹起來,根據我寫3D動畫的經驗，最好有一個父元素來包裹2、先給.parent設置寬高，并且給他設置視距和基點位置。
- 1
- 2
- 3
- 4
- 5
- 6
.parent{
width: 800px;
height: 400px;
border: 1px solid #000;
margin: 0 auto;
perspective: 2000px;
perspective-origin: -40% -80%;
background: #000;
}
3、給ul設置寬高以及preserve-3d屬性保留子元素3d轉換，子元素li全部絕對定位
ul{
width: 50px;
position: relative;
margin: 100px auto;
transform-style : preserve-3d;
}
li{
width: 100px;
height: 100px;
background: rgba(255, 255, 0, 0.3);
position: absolute;
text-align: center;
border: 3px solid greenyellow;
}
效果如下圖所示：
li:nth-child(1){
background: rgba(255, 255, 0, 0.3);
transform: translateY(50px) rotateX(90deg);
}
效果如下圖所示：
/*上面*/
li:nth-child(1){
transform: translateY(-50px) rotateX(90deg);
}
/*下面*/
li:nth-child(2){
transform: translateY(50px) rotateX(90deg);
}
/*左面*/
li:nth-child(3){
transform: translateX(-50px) rotateY(90deg);
}
/*右面*/
li:nth-child(4){
transform: translateX(50px) rotateY(90deg);
}
/*前面*/
li:nth-child(5){
transform: translateZ(50px);
}
/*后面*/
li:nth-child(6){
transform: translateZ(-50px);
}
效果如下圖所示：
代碼如下：
書頁2
效果如下圖：
代碼如下：
立方體
效果如下圖：
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113708.html
摘要：前言本篇文章給大家帶來的內容是關于實現動畫特效的代碼實例，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。 前言 本篇文章給大家帶來的內容是關于css實現3d動畫特效的代碼實例，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。 屬性 perspective ：透距離，單位像素（值越小，透視距離越近，效果越明顯）：設置父元素上 perspective-orig...
摘要：超過的星星，是一個動畫庫，可以處理屬性，單個轉換，或任何屬性以及對象。超過星星，這個動畫庫大小只有。超過星星，這個庫基允許你以選定的速度為字符串創建打字動畫。 想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你！ 1.Three.js showImg(https://segmentfault.com/img/bVbkQ4X?w=551&h=358); 超過46K的星星，...
閱讀 2664·2021-11-24 09:38
閱讀 1979·2019-08-30 15:53
閱讀 1234·2019-08-30 15:44
閱讀 3229·2019-08-30 14:10
閱讀 3579·2019-08-29 16:29
閱讀 1800·2019-08-29 16:23
閱讀 1099·2019-08-29 16:20
閱讀 1472·2019-08-29 11:13
