31.CSS3变形效果【下】
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?第二十四章 ?CSS3變形效果【下】
一、3D變形簡介
?????????【上】講的是2D，本章講的是3D（在二維基礎上多出一個z軸）。
?????????屬性值 ?????????????????????????????說明
??????translate（x,y,z） ?????3D方式平移元素，設置x,y和z軸
??????translateZ(z) ??????????設置3D方式平移元素的z軸
??????scale3d(x,y,z) ?????????3D方式縮放一個元素
??????scaleZ(z) ??????????????設置3D方式縮放元素的z軸
??????rotate3d(x,y,z,a) ??????3d方式旋轉元素
?
??????rotateX(a) ?????????????
??????rotateY(a) ?????????????分別設置3D方式的旋轉元素的x,y,z軸
??????rotateZ(a)
?
??????perspective(長度值) ????設置一個透視投影矩陣
??????matrix3d(多個值) ???????定義一個矩陣
????
?????3D變形比2D變形出來的要晚一些，如果需要兼容舊版本瀏覽器，可以對照這個表
??????????????????????????Opera ????Firefox ????Chrome ?????Safari ??????IE
?????????支持需帶前綴 ???15～22 ????10～15 ?????12～35 ??????4～8 ???????無
?????????支持不帶前綴 ?????23+ ???????16+ ????????26+ ????????無 ??????10.0+
?
?????//兼容版本完整形式
?????-webkit-transform：translateZ（200px）;
??????????????????·
??????????????????·
??????????????????·
二、transform-style：屬性是指定嵌套元素如何在3D空間中呈現。
?????????（1）flat ??????:默認值，表示所有子元素在2D平面呈現
?????????（2）preserve-3d:表示子元素在3D空間呈現。
?
??????//一般設置當前元素的父元素
?????????????????transform-style：preserve-3d; ?（需要配合后面的屬性才能看到，同樣，這個屬性也需要加上前綴）
?
三、perspective：是3D變形的重要屬性，該屬性會設置查看者位置，并將可視內容映射到一個視錐上，繼而投放到一個2D平面上。
????????????屬性值 ?????????????????????????????說明
?????????????none ????????????默認值，表示無線的角度來看3D物體，但看上去是平的
?????????????長度值 ??????????接受一個長度單位大于0的值，其單位不能為百分比，值越大，角度出現的越遠。（好比你離遠看物體，值越小，正相反）
?
四、3D變形屬性
??????1、translate3d(x,y,z) ???//需要3D位移的html結構，必須有父元素包含
????????????????<div id="a">
???????????????????????<img src="img.png" alt=""/>
????????????????</div>
??????????//css部分，父元素設置3D呈現且設置透視距離
????????????#a{
????????????????perspective:1000px;
????????????????transform-style:preserve-3d;
????????????}
????????????img{
???????????????//z軸可以是負值
????????????????transform:translateZ(240px);
????????????}
??????2、transformZ(z) ???//z軸可以單獨設置，z軸可以是負值
????????????img{;
????????????????transform：translateZ（240px）
????????????} ???
??????3、scale3d(x,y,z) ???//3D縮放，單獨設置無效，需要配合角度
????????????img{
????????????????transform:scale3d(1,1,1.5) rotateX(45deg);
????????????}
??????4、scaleZ(z) ??//單獨設置z軸，x和y軸默認為1.
????????????img{
????????????????transform:scaleZ(1.5) rotateX(45deg);
????????????}
??????5、rotate3d(x,y,z,a) ?//設置3D旋轉，a表示角度，xyz是0或1（0表示未啟用，1表示啟用）
????????????????transform:scale3d(1,1,1，45deg）； ??//xyz軸都啟用
????????????????transform:scale3d(1,0,0，45deg）； ??//x軸啟用，且x軸旋轉45度
??????6、rotateX（a）、rotateY（a）、rotateZ（a） ?????//單獨設置3D旋轉
????????????????transform：rotateX（45deg）；
??????????????????????·
??????????????????????·
????????????????transform：rotateX（45deg） rotateY（45deg） rotateZ（45deg）
?
??????CSS3還提供了perspective-origin屬性來設置3D變形中的原點角度，該屬性的默認值為50% 50%也就是center center。
??????????屬性值 ????????????????????說明
?????????百分數值 ??????????指定元素x軸成y軸的起點 ?????
?????????長度值 ????????????指定距離
?
?????????left
?????????center ????????????指定x軸的位置
?????????right
?
?????????top
?????????center ????????????指定y軸的位置
?????????bottom
?
??????????//源點設置右上方變形
??????????????????perspective-origin:topright;
?
?????????CSS3還提供了一個元素中設置透視的值perspective（長度值），但他還是和父元素這只有一定不同，因為父元素整個作為透視，而元素自己作為透視，導致不同
?????????//具體測試看透視距離
???????????????img{
???????????????????transform:perspective(1000px) rotateY(45px);
???????????????}
轉載于:https://www.cnblogs.com/keshuai752100461/p/8485223.html
總結
以上是生活随笔為你收集整理的31.CSS3变形效果【下】的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： vue eslint 代码自动格式化
- 下一篇： 网络层协议介绍，IP包格式详解+ARP原