2D转换(旋转移动)

2021-05-29 21:12:54发布

(1)缩放scale

缩放,顾名思义,可以放大和缩小。只要给元素添加上了这个属性就能控制它放大还是缩小


重点:

1. 注意其中的x和y用逗号分隔

2. transform:scale(1,1):宽和高都放大一倍,相对于没有放大

3. transform:scale(2,2):宽和高都放大了2倍

4. transform:scale(2):只写一个参数,第二个参数则和第一个参数一样,相当于

5. scale(2,2)transform:scale(0.5,0.5)∶缩小

6. sacle缩放最大的优势:可以设置转换中心点缩放,默认以中心点缩放的,而且不影响其他盒子。

div {
     width: 200px;
     height: 200px;
     background-color: pink;
     margin: 100px auto;
     transform-origin: left bottom;/*可以设置缩放左下角 默认是中心点*/
     transition: all 0.4s; /*过渡*/
 }
 
 div:hover {
     transform: scale(0.5, 0.5);/*缩放*/

TAG标签: css

登录 后发表评论
0条评论
还没有人评论过~