CSS3 (3) --- 2D deformation (Transform)
2D is a feature of the deformation of the subversive CSS3, which have common attributes: 移动(Translate), 缩放(Scale), 旋转(Rotate), 倾斜(skew).
A, 2D deformation grammar
1, a mobile (Translate)
Mobile attributes: translate
translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
translateX(x)仅水平方向移动（X轴移动）
translateY(Y)仅垂直方向移动（Y轴移动）For example, set:
transform: translate(50px,60px); /* 水平向右移动50px 和 垂直向下移动60px*/operation result
说明 From the above results it can be seen two runs
1, the default is to move the origin of the most left corner position.
2, px takes a positive number representative of the right or down. Px is negative, it would become to the left or upwards.
2, scaling (scale)
Scaling properties: scale
scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
scaleX(x)元素仅水平方向缩放（X轴缩放）
scaleY(y)元素仅垂直方向缩放（Y轴缩放）说明 The default is scale 1, 0.5 is set narrow double represents an enlarged twice.
For example, set:
transform: scale(0.5,1); /* 水平缩小0.5倍 和 垂直不变 */operation result
3, rotation (Rotate)
Rotation properties: rotate(positive is clockwise, negative is anti-clockwise)
For example, set:
transform: rotate(45deg); /* 注意单位是 deg 度数 */operation result
We can see here is the default position of the rotating diagonal rotation, there can also be set to rotate to other locations.
Adjusting element converting origin deformation properties:transform-origin
div {transform-origin: left top;transform: rotate(45deg); } /* 改变元素原点到左上角，然后进行顺时旋转45度 */
/*如果是4个角，可以用 left top这些，如果想要精确的位置， 可以用 px 像素*/
div {transform-origin: 10px 10px;transform: rotate(45deg); } /* 改变元素原点到x 为10 y 为10，然后进行顺时旋转45度 */4, the inclination (skew)
Rotation properties: rotate(positive is clockwise, negative is anti-clockwise)
For example, set:
transform: skew(30deg,0deg); /* 水平方向上倾斜30度，垂直方向保持不变 */operation result
Second, the example
1, mobile
效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过渡</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
transition: all 1.2s; /*过渡时间1.2秒*/
}
div:hover {
transform: translate(100px, 50px); /*水平移动100px 垂直移动50px*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>2, zoom
效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>缩放</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
transition: all 1.2s; /*过渡时间1.2秒*/
}
div:hover {
/*transform: scale(0.8, 1); 0 0% 1 100% 宽度变为了原来的 80% 高度不变*/
/*transform: scale(1, 0.8); 0 0% 1 100% 宽度变为了原来的 80% 高度不变*/
transform: scale(0.5); /* 高度 和 宽度一起缩放 都是 0.5 */
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>3, zoom (Sina photo to enlarge)
效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>缩放</title>
<style>
div {
width: 386px;
height: 260px;
overflow: hidden; /*多余部分隐藏*/
}
div img {
transition: all 0.5s; /*设置过渡时间*/
}
div:hover img {
transform: scale(1.1); /*设置放大1.1倍*/
}
</style>
</head>
<body>
<div>
<img src="1.jpg" height="260" width="386" alt="">
</div>
</body>
</html>4. Rotate (default origin of rotation)
效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>旋转</title>
<style>
div {
width: 150px;
height: 150px;
background-color: pink;
margin: 100px auto;
transition: all 0.8s;
}
div:hover {
transform: rotate(45deg); /* 顺时针旋转45度*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>5, the rotation (rotation specify the origin)
效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>旋转</title>
<style>
div {
width: 150px;
height: 150px;
background-color: pink;
margin: 100px auto;
transition: all 1.0s;
transform-origin: right bottom; /*设置 旋转中心点为 右下角*/
}
div:hover {
transform: rotate(90deg); /*旋转90度*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>6, tilt
效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倾斜</title>
<style>
div {
width: 150px;
height: 150px;
margin: 100px auto;
background-color: pink;
transition: all 1.0s
}
div:hover {
transform: skew(30deg); /*倾斜度*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
你如果愿意有所作为，就必须有始有终。(17)