2D转换模块:注意点:1.可以类似于过渡模块一样简写,但是这里不是用逗号隔开而是用空格
2.2D的转换模块会修改元素的坐标系,所以旋转之后的平移就不是水平平移
格式:旋转:transform: rotate(30deg)旋转角度
平移:transform: translate(50px,100px);平移的坐标系
缩放:transform: scale(2,4);缩放的倍数
翻转:transform: skew(30deg,20deg);沿x轴y轴旋转的角度
矩阵:transform:matrix(0.866,0.5,-0.5,0.866,0,0);使用六个值的矩阵。达到以上所有功能
综合:transform: rotate(30deg) translate(50px,10px) scale(2,4) skew(30deg,30deg);用空格隔开
形变中心点:transform-origin:50% 50% 可以用百分比,像素,特殊关键字,默认旋转是通过自己的中心点做参考,可以通过修改形变中心点来改变旋转
旋转轴向:transform:rotateX(45deg);transform:rotateY(45deg);transform:rotateZ(45deg);一般默认旋转是垂直桌面的Z轴旋转的
透视属性:perspective:500px 近大远小(一般结合旋转轴向来看,更加直观)值是距离物体的多远
注意点:一定要把透视属性设置到你要观察的元素的父元素(上级就行,设置给它爷爷也行)上面!!!!!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>2D转换</title> <style> *{ padding: 0; margin: 0; } ul{ list-style: none; width: 800px; height: 800px; background-color: #5bc0de; margin: 0 auto; } li{ width: 60px; height: 50px; background-color: yellow; margin: 0 auto; margin-bottom: 100px; text-align: center; line-height: 50px; } .box2{ transform: rotate(30deg); } .box3{ transform: translate(50px,10px); } .box4{ transform: scale(2,4); } .box5{ transform: skew(30deg,30deg); } .box6{ transform: rotate(30deg) translate(50px,10px) scale(2,4) skew(30deg,30deg); } </style> </head> <body> <ul> <li class="box1">正常</li> <li class="box2">旋转</li> <li class="box3">平移</li> <li class="box4">缩放</li> <li class="box5">翻转</li> <li class="box6">综合</li> </ul> </body> </html>
1.2D和3D的区别:2D就是没有厚度只有宽高,3D就是除了宽高还加了厚度
默认情况下所有的元素都是2D元素
2.如何呈现3D:类似于透视,给其父元素添加transform-style:preserve-3d就行
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>3D转换</title> 6 <style> 7 *{ 8 padding: 0; 9 margin: 0; 10 } 11 .father{ 12 background-color:skyblue; 13 width: 200px; 14 height: 200px; 15 margin: 100px auto; 16 perspective: 500px; 17 transform: rotateY(0deg); 18 transform-style: preserve-3d; 19 } 20 .son{ 21 background-color: red; 22 width: 100px; 23 height: 100px; 24 margin: 20px auto; 25 transform: rotateY(45deg); 26 } 27 </style> 28 </head> 29 <body> 30 <div class="father"> 31 <div class="son"></div> 32 </div> 33 </body> 34 </html>