什么是3d的場景呢？2d場景，在屏幕上水平和垂直交叉線x軸和y軸

3d場景，在垂直于排名的方向，相對于3d多出個z軸

Z軸靠近屏幕方向是正值，遠離屏幕的方向是反向

css3中的3d變換主要包含以下幾種功能函數：

3d位移： css3中3d位移主要包含tanslateZ()和translate3d()兩個函數； ? 3d旋轉： css3中的3d旋轉主要包含rotateX(),rotateY(),rotateZ()和rotate3d()四個功能函數 ? 3d縮放： css3中的3d縮放主要包含scaleZ()和scale3d()兩個功能函數；

1.3D平移

先在母元素構建一個3d舞臺

transform-style:preserve-3d; ? preserve-3d：3d舞臺 flat：2d舞臺，默認值

transform寫法

transform:translateZ(100px); transform:translate3d(0,0,200px); ? transform:translateZ(100px);表示對象在z軸往正方向移動了100px transform:translate3d(0,0,200px);表示對象在x軸移動了0，y軸移動0，z軸移動100px

景深-perspective（實現z軸移動的視覺效果）

? ? ? ? ? ? ? 生活中的3d區別于2d的地方 近大遠小 程序中實現的辦法 perspective 元素距離 視線的距離（物體和眼睛距離越小，近大遠小的效果越明顯） perspective:1200px;(在父元素中使用) transform：perspective(1200px) (在子元素中使用) 兩個都設置會發生沖突，建議值設置父元素，通常的數值為900-1200之間 如果當你的視線離物體足夠遠的時候，基本上就不會有近大遠小的感覺perspective-origin: 觀察3d元素的（位置）角度perspective-origin:center center;(中心)perspective-origin:left top;(左上角)perspective-origin:100% 100%;(右下角)

2.3D旋轉

rotateX()方法，元素圍繞其X軸給定的度數進行旋轉 三維空間，按著x軸進行翻轉 rotateY()方法，元素圍繞其Y軸給定的度數進行旋轉 三維空間，按著y軸進行翻轉 ? rotateZ()其實和2d的旋轉效果一樣，繞著z軸旋轉 語法： transform:rotate3d(1,1,1,30deg); 代表，繞著x軸旋轉1*30deg繞著y軸旋轉1*30deg繞著z軸旋轉1*30deg ****前面三個數取值0-1

3.3D縮放

css3 3d變形中只有有scaleZ()和scale3d()兩種函數，當scale3d()中x軸和y軸同時為1，即scale3d(1,1,sz)。通過使用3d縮放函數，可以讓元素在z軸上按比例縮放。默認值為1，當值大于1時，元素放大，反之小于1大于0.01時元素縮小

scale3d(sx,sy,sz)

sx:橫向縮放比例 sy：縱向縮放比例 sz：z軸縮放比例

scaleZ(S)

S:指定元素每個點在z軸的比例 注：scaleZ()和scale3d()函數在單獨使用的時候沒有任何效果， ? 必須配合其他屬性一起使用:transform-style:preserve-3d; /*搭建3d舞臺*/perspective:900px; /*景深*/transform:rotate3d() /*旋轉*/ ? 必須配合使用

復合寫法

transform:scale3d(1,1,10) rotateX(45deg); ? 1:x軸放大1倍 1:y軸放大1倍 10：z軸上放大10倍數

總結

以上是生活随笔為你收集整理的css 3D动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。