版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/baidu_39067385/article/details/81952670
2D变形
transform功能:
用来实现文字或图像的旋转、缩放、倾斜与移动的变形效果;可以单独实现效果,也可以对一个元素使用多个变形方法;
1)缩放
scale(缩放倍率):实现文字或图像的缩放处理;
只有一个参数时,该参数指的是水平和垂直方向缩放相同的倍数,如果是两个参数那么就是分别指水平、垂直各自的缩放倍数;
2)倾斜
skew(30deg,30deg)表示水平方向倾斜30度,垂直方向倾斜30度;
只使用一个参数时,则表示为只在水平方向进行倾斜,垂直方向上不进行倾斜;
3)移动
translate(50px,50px):表示水平方向上移动50px,垂直方向上一定50px;
只使用一个参数时,则表示为只在水平方向进行移动,垂直方向上不进行移动;
4)旋转
rotate(角度值) 旋转方向为顺时针方向
对一个元素使用多中变形
div{
width: 300px;
background-color: yellow;
text-align: center;
/* 旋转45度,放大到1.5倍 水平移动150px 垂直移动200px */
transform:rotate(45deg) scale(1.5) translate(150px, 200px);
}
在使用transform方法进行变形处理的时候,是以元素的中心点为基准点进行变形的。
指定变形的基准点
transform-origin属性,可以改变变形的基准点;
transform-origin:水平方向的位置(值的指定可以为left、center、right) 垂直方向的位置(top、center、bottom);
<style type="text/css">
div{
width: 200px;
height:200px;
display:inline-block;
}
div#a{
background-color: pink;
}
div#b{
background-color: green;
transform: rotate(45deg);
/* 修改变形基准点 */
transform-origin: left bottom;
}
</style>
<body>
<div id="a"></div>
<div id="b"></div>
</body>