标签：
CSS动画效果可以使用transform和Animation，前者较简单，先学习前者。
transform有几个基本变换，平移、旋转、缩放、扭曲
一、translate平移
有translate2d和translate3d之分，实际项目中可以只考虑3d，因为可以开启3d硬件加速。
transform：translate3d(Xpx,Ypx,Zpx)
即各自向各方向平移多少像素，单位px
二、rotate旋转
实际也可以只考虑3d，即rotate3d
但是rotate3d只能对各轴设定相同的值，即transform：rotate3d(1,1,0,45deg)，前三个参数是布尔值，表示当前轴是否旋转，不能单独指定旋转角度。
可以transform：rotate3d(1,0,0,45deg) rotate3d(0,1,0,90deg) rotate3d(0,0,1,30deg) 对各轴设定选择角度
三、scale缩放
四、skew扭曲
平移和选择的demo如下
<html> <head> <title>transform demo</title> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <style> body{ overflow: hidden; } #content{ -webkit-perspective: 500; -webkit-perspective-origin:50% 50%; width: 100%; height: 100%; } #test{ width: 280px; height: 397px; margin: 0 auto; background-image: url(bg.png); background-color: #eee; transition:all 1s; } #tool{ width: 300px; height: 200px; margin: 0 auto; text-align: center; padding: 20px; } </style> <script> function getlate(){ var lateX=$("input[name=‘lateX‘]").val(); $("input[name=‘lateX‘]").next(‘span‘).html(lateX+"px"); var lateY=$("input[name=‘lateY‘]").val(); $("input[name=‘lateY‘]").next(‘span‘).html(lateY+"px"); var lateZ=$("input[name=‘lateZ‘]").val(); $("input[name=‘lateZ‘]").next(‘span‘).html(lateZ+"px"); $("#test").css("transform","translate3d("+lateX+"px,"+lateY+"px,"+lateZ+"px)"); } function getrotate(){ var rotateX=$("input[name=‘rotateX‘]").val(); $("input[name=‘rotateX‘]").next(‘span‘).html(rotateX+"deg"); var rotateY=$("input[name=‘rotateY‘]").val(); $("input[name=‘rotateY‘]").next(‘span‘).html(rotateY+"deg"); var rotateZ=$("input[name=‘rotateZ‘]").val(); $("input[name=‘rotateZ‘]").next(‘span‘).html(rotateZ+"deg"); $("#test").css("transform","rotate3d(1,0,0,"+rotateX+"deg) "+"rotate3d(0,1,0,"+rotateY+"deg) "+"rotate3d(0,0,1,"+rotateZ+"deg)"); } $(function(){ getlate(); getrotate(); }); </script> </head> <body> <div id="content"> <div id="test"></div> <div id="tool"> X轴平移<input type="range" name="lateX" min="-100" max="100" value="0" onchange="getlate();"/><span></span><br /> Y轴平移<input type="range" name="lateY" min="-100" max="100" value="0" onchange="getlate();"/><span></span><br /> Z轴平移<input type="range" name="lateZ" min="-100" max="100" value="0" onchange="getlate();"/><span></span><br /> X轴旋转<input type="range" name="rotateX" min="-180" max="180" value="0" onchange="getrotate();"/><span></span><br /> Y轴旋转<input type="range" name="rotateY" min="-180" max="180" value="0" onchange="getrotate();"/><span></span><br /> Z轴旋转<input type="range" name="rotateZ" min="-180" max="180" value="0" onchange="getrotate();"/><span></span> </div> </div> </body> </html>
标签：
原文地址：http://www.cnblogs.com/fj0716/p/4776804.html
