400-650-7353
您所在的位置:首頁 > IT干貨資料 > web前端 > 【Web前端基礎知識】CSS3如何實現3D變換

【Web前端基礎知識】CSS3如何實現3D變換

  • 發布: Web前端培訓
  • 來源:Web前端干貨資料
  • 2020-02-28 14:19:55
  • 閱讀()
  • 分享
  • 手機端入口

3、3d重要功能函數

(1) 3D位移

在CSS3中3D位移主要包括兩種函數translateZ()和translate3d()。translate3d()函數使一個元素在三維空間移動。

語法:translate3d(tx,ty,tz)tx:代表橫向坐標位移向量的長度;

ty:代表縱向坐標位移向量的長度;

tz:代表Z軸位移向量的長度。此值不能是一個百分比值,如果取值為百分比值,將會認為無效值。

translateZ()函數的功能是讓元素在3D空間沿Z軸進行位移。語法:translateZ(t)t:指的是Z軸的向量位移長度。

(2) 3D旋轉

在三維變形中,我們可以讓元素在任何軸旋轉。為此,CSS3新增三個旋轉函數:rotateX()、rotateY()、rotateZ()和rotate3d(x,y,z,a)。

rotateX(a)

rotateX()函數指定一個元素圍繞X軸旋轉,旋轉的量被定義為指定的角度;如果值為正值,元素圍繞X軸順時針旋轉;反之,如果值為負值,元素圍繞X軸逆時針旋轉。

rotateY(a)

rotateY()函數指定一個元素圍繞Y軸旋轉,旋轉的量被定義為指定的角度;如果值為正值,元素圍繞Y軸順時針旋轉;反之,如果值為負值,元素圍繞Y軸逆時針旋轉。

rotateZ(a)

rotateZ()函數和其他兩個函數功能一樣的,區別在于rotateZ()函數指定一個元素圍繞Z軸旋轉。

rotate3d(x,y,z,a)

x:是一個0到1之間的數值,主要用來描述元素圍繞X軸旋轉的矢量值;

y:是一個0到1之間的數值,主要用來描述元素圍繞Y軸旋轉的矢量值;

z:是一個0到1之間的數值,主要用來描述元素圍繞Z軸旋轉的矢量值;

a:是一個角度值,主要用來指定元素在3D空間旋轉的角度,如果其值為正值,元素順時針旋轉,反之元素逆時針旋轉。

3d旋轉

(3) 3D縮放

CSS3 3D變形中的縮放主要有scaleZ()和scale3d()兩種函數,當scale3d()中X軸和Y軸同時為1,即scale3d(1,1,sz),其效果等同于scaleZ(sz)。通過使用3D縮放函數,可以讓元素在Z軸上按比例縮放。默認值為1,當值大于1時,元素放大,反之小于1大于0.01時,元素縮小

scale3d(sx,sy,sz)

sx:橫向縮放比例;

sy:縱向縮放比例;

sz:Z軸縮放比例;

scaleZ(s)

s:指定元素每個點在Z軸的比例。

注:scaleZ()和scale3d()函數單獨使用時沒有任何效果,需要配合其他的變形函數一起使用才會有效果

 

文章“【Web前端基礎知識】CSS3如何實現3D變換”已幫助

>>本文地址:http://www.028benet.com/zhuanye/2020/48403.html

THE END  

聲明:本站稿件版權均屬中公教育優就業所有,未經許可不得擅自轉載。

1 您的年齡

2 您的學歷

3 您更想做哪個方向的工作?

獲取測試結果
  • 大前端大前端
  • 大數據大數據
  • 互聯網營銷互聯網營銷
  • JavaJava
  • Linux云計算Linux
  • Python+人工智能Python
  • 嵌入式物聯網嵌入式
  • 全域電商運營全域電商運營
  • 軟件測試軟件測試
  • 室內設計室內設計
  • 平面設計平面設計
  • 電商設計電商設計
  • 網頁設計網頁設計
  • 全鏈路UI/UE設計UI設計
  • VR/AR游戲開發VR/AR
  • 網絡安全網絡安全
  • 新媒體與短視頻運營新媒體
  • 直播帶貨直播帶貨
  • 智能機器人軟件開發智能機器人
 

快速通道fast track

近期開班時間TIME

主站蜘蛛池模板: 亚洲精品无码久久久久秋霞| 欧美www网站| 好妈妈5高清中字在线观看神马| 国产一区二区三区免费看| 久久久久免费精品国产| 里漫社扶她全彩口工漫画| 日韩在线一区二区三区免费视频| 国产成人精品一区二区三区 | 日本国产在线视频| 国产午夜福利久久精品| 亚洲男人的天堂在线| 97精品视频在线观看| 在线观看永久免费| 狠狠入ady亚洲精品| 在线观看无码的免费网站| 亚洲综合色婷婷| 一级特黄女**毛片| 精品久久久久久| 天天在线综合网| 亚洲欧美国产日韩天堂在线视| 2021精品国产品免费观看| 狠狠躁夜夜躁人人爽超碰97香蕉| 天下第一社区视频在线观看www| 亚洲精品成a人在线观看| 2018狠狠干| 日韩黄a级成人毛片| 国产三级久久精品三级| 久久青草精品38国产免费 | 老师你的兔子好软水好多作文高清| 欧美亚洲欧美区| 国产成人精品男人的天堂网站| 久久夜色精品国产尤物| 美女让男人桶出水的网站| 好大好猛好深好爽视频| 亚洲精品亚洲人成人网| 性满足久久久久久久久| 日本人的色道www免费一区| 劲爆欧美第1页婷婷| 99久久精品国产免费| 狠狠色噜噜狠狠狠狠69| 国产精品无码素人福利免费|