learn-html5-css3/transform.html at master · xiankui/learn-html5-css3 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css3 transform</title>
	<link rel="stylesheet" href="css/normalize.css">
	<link rel="stylesheet" href="css/transform.css">
</head>
<body>
	<header>
		<h1>css3 transform</h1>
		<p>
			任何变换都不会影响文档流，即元素仍占据变换前的文档位置及大小。
		</p>
	</header>
	<article>
		<h2>rotate</h2>
		<p>
			旋转rotate()函数通过指定的角度参数使元素相对<strong>原点</strong>进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。
		</p>
		<div class="demo-rotate">
			<div class="box">box normal</div>
			<div class="box box-rotate"><span>rotate</span></div>
		</div>
	</article>
	<article>
		<h2>skew</h2>
		<p>
			扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状。
		</p>
		<div class="demo-skew">
			<div class="box">normal box</div>
			<div class="box box-skew"><span>我不想被扭曲</span></div>
		</div>
	</article>
	<article>
		<h2>scale</h2>
		<p>缩放 scale()函数 让元素根据中心原点对对象进行缩放。</p>
		<div class="demo-scale">
			<div class="box">normal box</div>
			<div class="box box-scale">a scale box</div>
		</div>
	</article>
	<article>
		<h2>translate</h2>
		<p>
			translate()函数可以将元素向指定的方向移动，类似于position中的relative。或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。
		</p>
		<div class="demo-translate">
			<div class="box">normal box</div>
			<div class="box box-translate">a translate box</div>
			<div class="box">document flow</div>
			<hr>
		</div>
	</article>
	<article>
		<h2>matrix</h2>
		<p>
			matrix() 是一个含六个值的(a,b,c,d,e,f)变换矩阵，用来指定一个2D变换。
			<br />是transform变换的基础，可实现更加复杂的变换效果。
		</p>
		<a href="http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/">matrix by zhangxinxu</a>
	</article>
	<article>
		<h2>transform-origin</h2>
		<p>
			在没有重置transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。
		</p>
		<div class="demo-transform-origin">
			<div class="box">normal box</div>
			<div class="box box-origin-default">default origin</div>
			<div class="box box-origin-leftBottom">left bottom origin</div>
		</div>
	</article>
</body>
</html>