2D转换
transform属性
作用:能够对元素进行移动、旋转、缩放和倾斜的属性。
格式:
transform:translate();
从当前位置移动元素,第一个参数是水平方向,第二个参数是垂直方向。
transform:rotate();
旋转元素,需要说明角度。例如:transform:rotate(45deg);
默认是以Z轴旋转,也可以写成transform: rotateZ(45deg);
围绕X轴旋转:transform: rotateX(45deg);
围绕Y轴旋转:transform: rotateY(45deg);
transform:scale();
缩放元素,第一个参数是水平方向,第二个参数是垂直方向。注意点:如果取值是1,代表不变;如果取值大于1,代表需要放大;如果取值小于1,代表需要缩小;如果水平和垂直缩放都一样,那么可以简写为一个参数。
注意点
1.如果需要进行多个转换,那么用空格隔开
2.2D的转换模块会修改元素的坐标系,所以旋转之后再平移就不再是水平平移,而是会根据旋转了多少度,坐标系就会旋转多少度。
transform-origin属性
默认情况下所有元素的旋转都是以自己的中心点作为参考点来旋转的。而参考点可以通过transform-origin属性来进行修改。
格式:
/*左上角*/
transform-origin: 0px 0px;
/*右上角*/
transform-origin: 200px 0px;
第一个参数是水平方向,第二个参数是垂直方向。
注意点
取值有三种形式:
具体像素
百分比
特殊关键字:
center,center居中
left,top左上角
perspective属性
透视属性。
什么是透视属性?
近大远小。
注意点
透视属性一定要添加到需要呈现近大远小效果的父元素上面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>96-2D转换练习</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 310px;
height: 438px;
background-color: black;
border: 1px solid #000;
margin: 100px auto;
perspective: 500px;
}
div img{
transform-origin: center bottom;
transition: transform 1s;
}
div:hover img{
transform: rotateX(80deg);
}
</style>
</head>
<body>
<div>
<img src="images/pk.png">
</div>
</body>
</html>