CSS3中的transfrom属性,能够对元素进行移动、缩放、旋转、斜切等操作。
translate移动:translate(tx) | translate(tx, ty)
translateX(tx), translateY(ty)
如果只有个参数,就代表x方向;如果有2个参数,就代表x和y方向。
scale缩放:让元素根据中心原点对对象 进行缩放。默认值1
如果值在0.01-0.99之间的任意值,元素缩小;而大于1的时候,让元素显得更大。
缩放都是参照元素中心点。
1. 当传入两个参数,分别按照不同的参数进行缩放。
2. 传入一个参数,代表x和y方向,进行等比例的缩放。
rotate旋转:rotate(a)
a 代表一个旋转的角度值。可以使正数,也可以是负数。
如果取值为正数,元素默认相对元素中心点顺时针旋转;150deg
如果是负数,元素默认之下相对元素中心点逆时针旋转。-150deg
skew斜切:skew(ax)| skew(ax, ay)
ax:指定元素水平方向(x轴方向)倾斜的角度。
ay:指定元素垂直方向(Y轴方向)倾斜的角度,默认值0
如果角度为正,则往当前轴负方向斜切;为正数,往轴的而正方向斜切。
他可以将一个对象以其中心位置围绕x轴和y轴按照一定的角度倾斜。
这与rotate函数的旋转不同,rotate函数只是旋转,不会改变元素的形状。
skew函数不会旋转,而只会改变元素的形状。
<html>
<head>
<meta charset="utf-8">
<title>实现2D转换 transform:translate, scale, rotate, skew</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
div {
width: 100px;
height: 100px;
background-color: red;
margin-left: 200px;
transition: transform 2s;
margin-top: 10px;
}
/* 移动 */
div:first-of-type:active {
/* 使用transform实现元素移动。
a 移动是参照元素的左上角
b 执行完毕之后恢复到原始状态 */
/* transform:translate(500px); */
/* transform:translate(500px, 600px); */
transform: translateY(500px);
}
/* 缩放 */
div:nth-of-type(2):active {
/* transform: scale(0.2, 1); */
transform:scaleX(0.5);
}
/* 旋转 */
div:nth-of-type(3):active {
transform:rotate(150deg);
/* transform:rotate(-150deg); */
}
/* 歪斜,让元素倾斜显示, */
div:nth-of-type(4):active {
/* transform:skew(45deg);*/
/* transform.: skew(30deg, -30deg); */
transform:skewX(60deg);
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</body>
</html>