1.translate 平移
2.rotate 旋转
3.scale 缩放
4.skew 扭曲
还有一个属性就是transform-origin 从哪个方向改变被转换元素的位置
因为是css属性,所以必然,2d转化的设置在style中设置基本格式,transform:XXX;以选择哪种转化,还可以设置transition:time;以设置转化时间(不过不能设置在初始状态下,否则无效)
1.translate
通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数:
2.rotate
通过 rotate() 方法,元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。
rotate可以设置transform-origin可以设置旋转点的位置。
rotateX和rotateY有点意思,他们是关于x,y轴旋转。
3.sclae
transform:scale(a,b)将元素沿x,y方向放大a,b倍,transform:scale(a)与transform:scale(a,a)一致
4.skew
t通过 skew() 方法,元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)。我试着设置了一下transform-origin但是效果仅是变化后元素会突然平移,效果很差,这个特性一般应该没用。
代码:通过div从不同的角度进行以上四种方法
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 6 <meta charset="UTF-8"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 8 <title>Document</title> 9 10 <style> 11 .box { 12 width: 850px; 13 height: 220px; 14 border: 1px solid; 15 margin: 200px auto; 16 } 17 18 .box>div { 19 float: left; 20 width: 200px; 21 height: 200px; 22 margin-top: 10px; 23 margin-left: 10px; 24 background-color: #0f0; 25 text-align: center; 26 line-height: 200PX; 27 } 28 /* 旋转 参数是角度 */ 29 .box>div:nth-child(1):hover { 30 /* 未说明是哪条轴,默认X轴旋转 */ 31 /* transform: rotate(45deg); */ 32 /* 沿着X轴旋转 */ 33 /* transform: rotateX(45deg); */ 34 /* 沿着Y轴旋转 */ 35 transform: rotateY(45deg); 36 background-color: red; 37 } 38 /* 平移 */ 39 40 .box>div:nth-child(2):hover { 41 /* 如果只给一个参数 默认沿着x轴平移 */ 42 /* transform: translate(100px); */ 43 /* transform: translateX(-100px); */ 44 /* transform: translateY(100px); */ 45 /* 沿着z轴方向的平移距离 沿着y轴方向的平移距离 如果只想沿着y轴移动,参数1给0*/ 46 transform: translate(100px, 100px); 47 background-color: red; 48 } 49 /* 缩放 */ 50 51 .box>div:nth-child(3):hover { 52 /* 只传一个参数 表示宽高同时进行缩放 */ 53 /* transform: scale(1.4); */ 54 /* transform: scaleX(0.5); */ 55 /* transform: scaleY(1.2); */ 56 /* 串联个参数分别表示宽的缩放倍数和高的缩放倍数 */ 57 transform: scale(0.2, 1.2); 58 background-color: red; 59 } 60 /* 扭曲 */ 61 62 .box>div:nth-child(4):hover { 63 /* transform: skew(45deg); */ 64 /* transform: skewX(45deg); */ 65 transform: skewY(45deg); 66 background-color: red; 67 } 68 </style> 69 </head> 70 71 <body> 72 <div class="box"> 73 <div class="top">旋转</div> 74 <div class="center">平移</div> 75 <div class="nav">缩放</div> 76 <div class="bottom">扭曲</div> 77 </div> 78 </body> 79 80 </html>
3D(3D坐标系相比2D坐标系多了一个Z轴,Z轴的正方向为垂直屏幕向外(朝向用户眼睛的方向)。)
transform-style:3d空间显示
perspective:3d视距,配合3D使用
backface-visibility:定义元素在不面对屏幕时是否可见。
电脑显示屏是一个2D平面,图像之所以具有立体感(3D效果),其实只是一种视觉呈现,通过透视可以实现此目的。
透视可以将一个2D平面,在转换的过程当中,呈现3D效果。
注:并非任何情况下需要透视效果,根据开发需要进行设置。
perspective 一般作为一个属性,设置给父元素,作用于所有3D转换的子元素
rotateX() : 就是沿着 x 立体旋转.
rotateY():沿着y轴进行旋转
rotateZ():沿着z轴进行旋转
translate3d(x,y,z)
[注意]其中,x和y可以是长度值,也可以是百分比,百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和;z只能设置长度值
卡牌翻转
//1、首先我们创建了一个“灯光”persepctive用来产生3D变化的效果的 //2、然后我们创建了一个“舞台” transform-style: preserve-3d //3、创建“演员”,这里的演员指的是每张的图片,在创建的时候要根据你最终要呈现的形态进行建模,也即是平移旋转之类的操作 css html,body{ background:#ff9f96; } .zf{ width: 300px; height: 300px; margin:200px auto; perspective:800px; } .bigbox{ width:300px; height:300px; position:relative; transform-style:preserve-3d;/*把bigbox变为3D空间*/ transition:transform 1s; } .xiaobox1{ backface-visibility:hidden;/*这行代码是xiaobox1设置为背面隐藏*/ width:300px; height:300px; position:absolute; background:url(../img/dome061.jpg); background-size:650px 300px; transform:rotateY(180deg);/*让xiaobox1原地旋转180度*/ } .xiaobox2{ backface-visibility:hidden; width:300px; height:300px; position:absolute; background:url(../img/dome062.jpg); background-size:650px 300px; } //正反两面都要进行翻转,所以hover效果要放在整体的盒子上 .bigbox:hover{ transform:rotateY(180deg);/*鼠标移到bigbox上他原地旋转180度*/ } <div class="zf"> <div class="bigbox"> <div class="xiaobox1"></div> <div class="xiaobox2"></div> </div> </div>
原文:https://www.cnblogs.com/zycs/p/13922050.html