
			<p>近来，HTML5和CSS3的发展速度还是很可观的，国内外不乏一些大站，酷站都在使用最新的技术。面对新的技术，我们该如何正确的把握和使用到今后的项目实战中呢？针对这一问题，浩子决定剖析CSS3，一一像各位同学解答CSS3到底是个神马东西。就已<a href="http://www.daqianduan.com/css3-transform/ ">transform</a>开始吧，写的不好的话，请严重拍砖！！</p>
<h2><strong>CSS3 transform是什么？</strong></h2>
<p>transform的含义是：改变，使…变形；转换</p>
<h2><strong>CSS3 transform都有哪些常用属性？</strong></h2>
<p>transform的属性包括：rotate() / skew() / scale() / translate(,) ，分别还有x、y之分，比如：rotatex() 和 rotatey() ，以此类推。</p>
<p>下面我们来分解各个属性的用法：</p>
<h3>transform:rotate()：</h3>
<p>含义：旋转；其中“deg”是“度”的意思，如“10deg”表示“10度”下同。</p>
<p style="text-align:center">
	<a href="http://www.daqianduan.com/example/?pid=2959" target="_blank" class="btn-demo">点此查看实例展示</a>
</p>
<blockquote><p><span style="color: #666666; font-family: monospace; line-height: normal;"><span class="css-select-op">.</span><span class="css-selector" style="color: #1111bb;">demo_transform1</span><span class="css-punctuation">{</span><span class="css-identifier" style="color: black;">-webkit-transform</span><span class="css-punctuation">:</span><span class="css-value" style="color: #770088;">rotate</span><span class="css-value" style="color: #770088;">(10deg</span><span class="css-value" style="color: #770088;">)</span><span class="css-punctuation">;</span><span class="css-identifier" style="color: black;">-moz-transform</span><span class="css-punctuation">:</span><span class="css-value" style="color: #770088;">rotate</span><span class="css-value" style="color: #770088;">(10deg</span><span class="css-value" style="color: #770088;">)</span><span class="css-punctuation">}</span></span></p></blockquote>
<h3>transform:skew()：</h3>
<p>含义：倾斜；</p>
<p style="text-align:center">
	<a href="http://www.daqianduan.com/example/?pid=2959" target="_blank" class="btn-demo">点此查看实例展示</a>
</p>
<blockquote><p><span style="color: #666666; font-family: monospace; line-height: normal;"><span class="css-select-op">.</span><span class="css-selector" style="color: #1111bb;">demo_transform2</span><span class="css-punctuation">{</span><span class="css-identifier" style="color: black;">-webkit-transform</span><span class="css-punctuation">:</span><span class="css-value" style="color: #770088;">skew</span><span class="css-value" style="color: #770088;">(20deg</span><span class="css-value" style="color: #770088;">)</span><span class="css-punctuation">;</span><span class="css-identifier" style="color: black;">-moz-transform</span><span class="css-punctuation">:</span><span class="css-value" style="color: #770088;">skew</span><span class="css-value" style="color: #770088;">(20deg</span><span class="css-value" style="color: #770088;">)</span><span class="css-punctuation">}</span></span></p></blockquote>
<h3>transform:scale()：</h3>
<p>含义：比例；“1.5”表示以1.5的比例放大，如果要放大2倍，须写成“2.0”，缩小则为负“-”。</p>
<p style="text-align:center">
	<a href="http://www.daqianduan.com/example/?pid=2959" target="_blank" class="btn-demo">点此查看实例展示</a>
</p>
<blockquote><p><span style="color: #666666; font-family: monospace; line-height: normal;"><span class="css-select-op">.</span><span class="css-selector" style="color: #1111bb;">demo_transform3</span><span class="css-punctuation">{</span><span class="css-identifier" style="color: black;">-webkit-transform</span><span class="css-punctuation">:</span><span class="css-value" style="color: #770088;">scale</span><span class="css-value" style="color: #770088;">(1</span><span class="css-select-op">.</span><span class="css-unit" style="color: #228811;">5</span><span class="css-value" style="color: #770088;">)</span><span class="css-punctuation">;</span><span class="css-identifier" style="color: black;">-moz-transform</span><span class="css-punctuation">:</span><span class="css-value" style="color: #770088;">scale</span><span class="css-value" style="color: #770088;">(1</span><span class="css-select-op">.</span><span class="css-unit" style="color: #228811;">5</span><span class="css-value" style="color: #770088;">)</span><span class="css-punctuation">}</span></span></p></blockquote>
<h3>transform:translate()：</h3>
<p>含义：变动，位移；如下表示向右位移120像素，如果向上位移，把后面的“0”改个值就行，向左向下位移则为负“-”。</p>
<p style="text-align:center">
	<a href="http://www.daqianduan.com/example/?pid=2959" target="_blank" class="btn-demo">点此查看实例展示</a>
</p>
<blockquote><p><span style="color: #666666; font-family: monospace; line-height: normal;"><span class="css-select-op">.</span><span class="css-selector" style="color: #1111bb;">demo_transform4</span><span class="css-punctuation">{</span><span class="css-identifier" style="color: black;">-webkit-transform</span><span class="css-punctuation">:</span><span class="css-value" style="color: #770088;">translate</span><span class="css-value" style="color: #770088;">(120px</span><span class="css-select-op">,</span><span class="css-unit" style="color: #228811;">0</span><span class="css-value" style="color: #770088;">)</span><span class="css-punctuation">;</span><span class="css-identifier" style="color: black;">-moz-transform</span><span class="css-punctuation">:</span><span class="css-value" style="color: #770088;">translate</span><span class="css-value" style="color: #770088;">(120px</span><span class="css-select-op">,</span><span class="css-unit" style="color: #228811;">0</span><span class="css-value" style="color: #770088;">)</span><span class="css-punctuation">}</span></span></p></blockquote>
<h3>transform综合：</h3>
<p>transform的常用属性就是这些了，下面我们借助transition的帮忙来演示一个关于css3?transform的综合实例：</p>
<p style="text-align:center">
	<a href="http://www.daqianduan.com/example/?pid=2959" target="_blank" class="btn-demo">点此查看实例展示</a>
</p>
<blockquote>
<div id="_mcePaste"><span style="color: #666666; font-family: monospace; line-height: normal;"><span class="css-select-op">.</span><span class="css-selector" style="color: #1111bb;">demo_transform5</span><span class="css-punctuation">{</span><span class="css-identifier" style="color: black;">-webkit-transition</span><span class="css-punctuation">:</span><span class="css-value" style="color: #770088;">all </span><span class="css-unit" style="color: #228811;">1s </span><span class="css-value" style="color: #770088;">ease-in-out</span><span class="css-punctuation">;</span><span class="css-identifier" style="color: black;">-moz-transition</span><span class="css-punctuation">:</span><span class="css-value" style="color: #770088;">all </span><span class="css-unit" style="color: #228811;">1s </span><span class="css-value" style="color: #770088;">ease-in-out</span><span class="css-punctuation">}</span><br />
<span class="css-select-op">.</span><span class="css-selector" style="color: #1111bb;">demo_transform5</span><span class="css-punctuation">:</span><span class="css-selector" style="color: #1111bb;">hover</span><span class="css-punctuation">{</span><span class="css-identifier" style="color: black;">-webkit-transform</span><span class="css-punctuation">:</span><span class="css-value" style="color: #770088;">rotate</span><span class="css-value" style="color: #770088;">(360deg</span><span class="css-value" style="color: #770088;">) </span><span class="css-value" style="color: #770088;">skew</span><span class="css-value" style="color: #770088;">(-20deg</span><span class="css-value" style="color: #770088;">) </span><span class="css-value" style="color: #770088;">scale</span><span class="css-value" style="color: #770088;">(3</span><span class="css-select-op">.</span><span class="css-unit" style="color: #228811;">0</span><span class="css-value" style="color: #770088;">) </span><span class="css-value" style="color: #770088;">translate</span><span class="css-value" style="color: #770088;">(100px</span><span class="css-select-op">,</span><span class="css-unit" style="color: #228811;">0</span><span class="css-value" style="color: #770088;">)</span><span class="css-punctuation">;</span><span class="css-identifier" style="color: black;">-moz-transform</span><span class="css-punctuation">:</span><span class="css-value" style="color: #770088;">rotate</span><span class="css-value" style="color: #770088;">(360deg</span><span class="css-value" style="color: #770088;">) </span><span class="css-value" style="color: #770088;">skew</span><span class="css-value" style="color: #770088;">(-20deg</span><span class="css-value" style="color: #770088;">)</span><span class="css-value" style="color: #770088;">scale</span><span class="css-value" style="color: #770088;">(3</span><span class="css-select-op">.</span><span class="css-unit" style="color: #228811;">0</span><span class="css-value" style="color: #770088;">) </span><span class="css-value" style="color: #770088;">translate</span><span class="css-value" style="color: #770088;">(100px</span><span class="css-select-op">,</span><span class="css-unit" style="color: #228811;">0</span><span class="css-value" style="color: #770088;">)</span><span class="css-punctuation">}</span></span></div>
</blockquote>
<p><a href="http://www.daqianduan.com/css3-transform/">CSS3详解：transform</a>为浩子所作，转载请注说明！</p>
<p>转载请注明：<a href="http://www.daqianduan.com">大前端</a> &raquo; <a href="http://www.daqianduan.com/css3-transform/">CSS3详解：transform</a></p>		