导读：
●转换transform我们简单理解就是变形有2D和3D之分
●我们暂且学了三个分别是位移旋转和缩放
●2D移动translate(x, y)最大的优势是不影响其他盒子，里面参数用% ,是相对于自身宽度和高度来计算的
●可以分开写比如translateX(x)和translateY(y)
●2D旋转rotate(度数)可以实现旋转元素 度数的单位是deg
●2D缩放sacle(x,y)里面参数是数字不跟单位可以是小数最大的优势不影响其他盒子
设置转换中心点transform-origin:xy;参数可以百分比、 像素或者是方位名词
●当我们进行综合写法,同时有位移和其他属性的时候,记得要将位移放到最前
2D转换之translate
transform:translate(x,y);
x是指沿x轴移动，y是指沿y轴移动。
如果只想移动让其在x或y轴移动也可以使用translateX(),translateY();
1.tranlate定义2D中的转换，沿着X轴和Y轴移动元素。
2，transform最大的优点：不会影响到其他元素的位置
3.translate中的百分比单位是相对于自身元素的大小而言的。
2D转换之旋转rotate
2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转
语法：transform:rotate(度数);
2.重点
●rotate里面跟度数，单位是deg比如rotate(45deg)
●角度为正时,顺时针,负时,为逆时针
●默认旋转的中心点是元素的中心点
可结合过渡效果为元素添加旋转效果
<style> img { 100px; transition: all 0.5s; } img:hover { transform: rotate(360deg); } </style> </head> <body> <img src="user.jpg" alt=""> </body>
4.4 2D转换中心点transform-origin
我们可以设置元素转换的中心点
1.语法
transform-origin: x y;
2.重点
● 注意后面的参数x和y用空格隔开
●xy默认转换的中心点是元素的中心点(50% 50%)
●还可以给xy设置像索或者方位名词( top bottom left right center )
旋转中心点案例
实现功能：鼠标经过时子盒子旋转至框中
<style> div { overflow: hidden; 100px; height: 100px; margin: 100px auto; border: 1px solid #ccc; } div::after { content: ''; display: block; 100%; height: 100%; background-color: pink; transform-origin: left bottom; transform: rotate(180deg); transition: all 1s; } div:hover::after { transform: rotate(0deg); } </style> </head> <body> <div></div> </body>
2D转换之缩放scale
缩放,顾名思义,可以放大和缩小。只要给元素添加_ 上了这个属性就能控制它放大还是缩小。
1.语法
transform:scale(x,y) ;
2.注意
注意其中的x和y用逗号分隔
●
transform:scale(1,1) : 宽和高都放大一倍,相对于没有放大
●
transform:scale(2,2) : 宽和高都放大了2倍
●transform:scale(2) : 只写一个参数, 第二个参数则和第一个参数- 样,相当于scale(2,2)
transform:scale(0.5,0.5) :缩小
scale缩放最大的优势:可以设置转换中心点缩放,默认以中心点缩放的,而且不影响其他盒子
scale相对于直接修改元素的宽度和高度值的优势：
直接修改元素的宽度元素会像两边扩展，直接修改元素的高度元素向下扩展
修改元素的宽度或高度后，该元素的变化会影响到其他的元素位置，而scale则不会有这个问题
<style> div { overflow: hidden; 200px; height: 200px; transition: all .3s; } div img:hover { transform: scale(1.2); } </style> </head> <body> <div><a href=""><img src="user.jpg" alt=""></a></div> </body>
2D转换综合写法
注意:
1.同时使用多个转换,其格式为: transform: translate() rotate( scale() ..等,
2.其顺序会影转换的效果。( 先旋转会改变坐标轴方向)
3.当我们同时有位移和其他属性的时候,记得要将位移放到最前面