-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathCSS3-2D-Transform.html
254 lines (220 loc) · 9 KB
/
CSS3-2D-Transform.html
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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="utf-8">
<title>CSS3 2D Transform</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="css/reveal.min.css">
<link rel="stylesheet" href="css/theme/night.css" id="theme">
<link rel="stylesheet" href="lib/css/zenburn.css">
</head>
<body>
<div class="reveal">
<div class="slides">
<section>
<h2>CSS3 2D Transform</h2>
<p>BY Hao Ju Zheng</p>
<p>github: <a href="https://github.com/hjzheng">https://github.com/hjzheng</a></p>
</section>
<section>
<h2>2D Transform</h2>
<p>
通过 CSS3 2D转换, 我们能够对元素进行移动、缩放、转动、拉长或拉伸。
</p>
<img src="img/transform-1.png">
</section>
<section>
<h2>如何Transform</h2>
<p>CSS3 是通过 **transform** 属性实现2D变换。</p>
<pre><code data-trim contenteditable style="font-size: 24px; margin-top: 10px;">
selector {
transform: transform-function transform-function ...
}
</code></pre>
</section>
<section data-markdown>
<script type="text/template">
## 常用2D变换函数:
- translate() 位移函数
- rotate() 旋转函数
- scale() 缩放函数
- skew() 扭曲函数
- matrix() 矩阵函数
</script>
</section>
<section>
<h2>translate函数</h2>
<p>使用translate()函数，对元素进行位置移动</p>
<pre><code data-trim contenteditable style="font-size: 24px; margin-top: 10px;">
div {
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Chrome, Safari, Opera */
transform: translate(50px,100px);
}
</code></pre>
<img src="img/transform-2.png" style="width: 350px;">
</section>
<section>
<h2>rotate函数</h2>
<p>使用rotate()函数，对元素进行旋转</p>
<pre><code data-trim contenteditable style="font-size: 24px; margin-top: 10px;">
div {
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
transform: rotate(30deg);
}
</code></pre>
<img src="img/transform-3.png" style="width: 350px;">
</section>
<section>
<h2>scale函数</h2>
<p>使用scale()函数，对元素进行缩放</p>
<pre><code data-trim contenteditable style="font-size: 24px; margin-top: 10px;">
div {
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Chrome, Safari, Opera */
transform: scale(2,4);
}
</code></pre>
<img src="img/transform-4.png" style="width: 350px;">
</section>
<section>
<h2>skew函数</h2>
<p>使用skew()函数，对元素进行扭曲</p>
<pre><code data-trim contenteditable style="font-size: 24px; margin-top: 10px;">
div {
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /*Chrome, Safari, Opera*/
transform: skew(30deg,20deg);
}
</code></pre>
<img src="img/transform-6.png" style="width: 350px;">
</section>
<section>
<h2>matrix函数</h2>
<p>什么是Matrix?</p>
<img src="img/transform-5.png">
</section>
<section>
<h2>2D 矩阵变换方程</h2>
<img src="img/transform-7.png" style="width: 400px;" >
<div>想了解更多
<a href="http://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/">
css3-matrix-transform
</a>
</div>
</section>
<section>
<h2>推导变换公式(兼容IE8)</h2>
<pre><code data-trim contenteditable style="font-size: 24px; margin-top: 10px;">
CSS3 matrix(1,0,0,1,0,0)
matrix(a,b,c,d,e,f)
IE8 progid:DXImageTransform.Microsoft.Matrix
(M11=1, M12=0,M21=0,M22=1,SizingMethod='auto expand');
M11 == a
M12 == c
M21 == b
M22 == d
</code></pre>
</section>
<section>
<h2>推导变换公式</h2>
<pre><code data-trim contenteditable style="font-size: 24px; margin-top: 10px;">
//矩阵实现位移(disX和disY为偏移量)
x位移: e = e + disX;
y位移: f = f + disY;
//矩阵实现缩放(x,y为缩放倍数)
x轴缩放: a = x*a; c=x*c; e=x*e;
y轴缩放: b = y*b; d=y*d; f=y*f;
//矩阵实现扭曲(xDeg,yDeg为扭曲角度)
c = Math.tan(xDeg/180*Math.PI);
b = Math.tan(yDeg/180*Math.PI);
//矩阵实现旋转(deg为旋转角度)
a = Math.cos(deg/180*Math.PI);
b = Math.sin(deg/180*Math.PI);
c = -Math.sin(deg/180*Math.PI);
d = Math.cos(deg/180*Math.PI);
</code></pre>
</section>
<section>
<h2>transform 兼容IE8</h2>
<div><a href="http://www.useragentman.com/IETransformsTranslator/">IETransformsTranslator</a></div>
<img src="img/transform-8.png">
</section>
<section>
<h2>transform-origin</h2>
<div>通过它设置旋转起点</div>
<pre><code data-trim contenteditable style="font-size: 24px; margin-top: 10px;">
div {
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin: 20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /*Chrome, Safari, Opera*/
-webkit-transform-origin: 20% 40%; /*Chrome, Safari, Opera*/
transform: rotate(45deg);
transform-origin: 20% 40%;
}
</code></pre>
</section>
<section>
<h2>transform-origin Example</h2>
<a href="http://jsfiddle.net/hjzheng/UjuT5/2/">http://jsfiddle.net/hjzheng/UjuT5/2/</a>
</section>
<section>
<h2>transform在项目中应用</h2>
<img src="img/transform-9.png">
</section>
<section data-markdown>
<script type="text/template">
##总结
###在div元素中实现文字旋转居中
- step1 写两个嵌套div(外层相对定位，内层绝对定位),外层的高是内层的宽,外层的宽是内层的高
- step2 使内层div文字居中,可选,通过left,top调整内层div的位置
- step3 通过调整内层div的transform-origin, 以它为旋转中心，进行旋转
</script>
</section>
<section data-markdown>
<script type="text/template">
##扩展阅读：
- [W3Cschool Transform教程][3]
- [Transform Example1][4]
- [Transform Example2][5]
- [2D矩阵变换原理][2]
- [矩阵函数的使用 Example][0]
[0]:http://jsfiddle.net/hjzheng/xz4DG/2/
[1]:http://www.cnblogs.com/Clingingboy/archive/2010/10/17/1853559.html
[2]:http://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/
[3]:http://www.w3school.com.cn/css3/css3_2dtransform.asp
[4]:http://jsfiddle.net/hjzheng/BJU3P/
[5]:http://jsfiddle.net/hjzheng/UjuT5/2/
[6]:http://www.gbtags.com/gb/share/2388.htm
</script>
</section>
<section>
<section>
<h2>谢谢观赏</h2>
<h3>2014-09-07</h3>
<p>如果你喜欢,请<a href="https://github.com/hjzheng/CUF_PPTs">star</a>我</p>
</section>
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.min.js"></script>
<script>
Reveal.initialize({
history: true,
transition: 'linear',
progress: true,
math: {
// mathjax: 'http://cdn.mathjax.org/mathjax/latest/MathJax.js',
config: 'TeX-AMS_HTML-full'
},
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }
]
});
</script>
</body>
</html>