整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
在CSS3中，可以利用transform功能實現(xiàn)文字或圖像的旋轉(zhuǎn)、縮放、傾斜、移動這4中類型的變形處理。
（1）瀏覽器支持
到目前為止：Safari3.1以上、Chrome8以上、Firefox4以上、Opera10以上瀏覽器支持該屬性。
使用rotate方法，在參數(shù)中加入角度值，角度值后面跟表示角度單位的“deg”文字即可，旋轉(zhuǎn)方向為順時針方向。
transform：rotate（45deg）；
使用scale方法來實現(xiàn)文字或圖像的縮放處理，在參數(shù)中指定縮放倍率。
transform：scale（0.5）；//縮小一半
（1）可以分別指定元素的水平方向的放大倍率與垂直方向的放大倍率
transform：scale（0.5，2）；//水平方向縮小一半，垂直方向放大一倍。
使用skew方法實現(xiàn)文字或圖像的傾斜處理，在參數(shù)中分別指定水平方向上的傾斜角度與垂直方向上的傾斜角度。
transform：skew（30deg，30deg）；//水平方向上傾斜30度，垂直方向上傾斜30度。
（1）只使用一個參數(shù)，省略另一個參數(shù)
這種情況下視為只在水平方向上進行傾斜，垂直方向上不傾斜。
transform：skew（30deg）；
使用translate方法來移動文字或圖像，在參數(shù)中分別指定水平方向上的移動距離與垂直方向上的移動距離。
transform：translate（50px，50px）；// 水平方向上移動50px，垂直方向上移動50px
（1）只使用一個參數(shù)，省略另一個參數(shù)
這種情況下視為只在水平方向上移動，垂直方向上不移動。
transform：translate（50px）；
transform：translate（150px，200px） rotate（45deg） scale（1.5）；
在使用transform方法進行文字或圖像變形的時候，是以元素的中心點為基準(zhǔn)點進行變形的。
使用該屬性，可以改變變形的基準(zhǔn)點。
transform：rotate（45deg）；
transform-origin：left bottom；//把基準(zhǔn)點修改為元素的左下角
（1）指定屬性值
基準(zhǔn)點在元素水平方向上的位置：left、center、right
基準(zhǔn)點在元素垂直方向上的位置：top、center、bottom
（1）旋轉(zhuǎn)
分別使用rotateX方法、rotateY方法、rotateZ方法使元素圍繞X軸、Y軸、Z軸旋轉(zhuǎn)，在參數(shù)中加入角度值，角度值后面跟表示角度單位的deg文字即可，旋轉(zhuǎn)方向為順時針旋轉(zhuǎn)。
transform：rotateX（45deg）；
transform：rotateY（45deg）；
transform：rotateZ（45deg）；
transform：rotateX（45deg） rotateY（45deg） rotateZ（45deg）；
transform：scale（0.5） rotateY（45deg） rotateZ（45deg）；
（2）縮放
分別使用scaleX方法、scaleY方法、scaleZ方法使元素按X軸、Y軸、Z軸進行縮放，在參數(shù)中指定縮放倍率。
transform：scaleX（0.5）；
transform：scaleY（1）；
transform：scaleZ（2）；
transform：scaleX（0.5）scaleY（1）；
transform：scale（0.5） rotateY（45deg）；
（3）傾斜
分別使用skewX方法、skewY方法使元素在X軸、Y軸上進行順時針方向傾斜（無skewZ方法），在參數(shù)中指定傾斜的角度
transform：skewX（45deg）；
transform：skewY（45deg）；
（4）移動
分別使用translateX方法、translateY方法、translateZ方法、使元素在X軸、Y軸、Z軸方向上進行移動，在參數(shù)中加入移動距離。
transform：translateX（50px）;
transform：translateY（50px）;
transform：translateZ（50px）;
每種變形方法的背后都存在著一個對應(yīng)的矩陣。
（1）計算2D變形（3 X 3矩陣）
可以將這個2D變形矩陣書寫為matrim（a,b,c,d,e,f）,a~f均代表一個數(shù)字，用于決定怎樣執(zhí)行變形處理。
（2）平移的2D矩陣
//效果一致：右移150px，下移150px
transform：matrix（1，0,0,1，150，150）；
transform：translate（150px，150px）；
（3）計算3D變形
3D縮放變形使用的4X4矩陣
transform:matrix3d(sx,0,0,0,0,sy,0,0,0,0,sz,0,0,0,0,1);
//效果一致：X軸方向上縮小五分之一，Y軸方向上縮小一半。
transform:scale3d(0.8,0.5,1);
transform:matrix3d(0.8,0,0,0,0,0.5,0,0,0,0,1,0,0,0,0,1);
（4）可通過矩陣執(zhí)行多重變形處理
將需要的變形矩陣相乘得到一個新的變形矩陣可實現(xiàn)該處理。
s實現(xiàn)左右框互移
需求：如上圖所示，左框和右框中分別有值。當(dāng)點選左框中一個或多個值后，再點擊中間向右箭頭按鈕，則選中值會從左框中消失并在右框中出現(xiàn)；同理點選右框值，也能移動到左側(cè)。
思路：1、左右框分別使用select標(biāo)簽，框內(nèi)值為option標(biāo)簽（便于取值），且設(shè)置multiple支持多選。
2、當(dāng)點擊箭頭按鈕時運行js函數(shù)goright（），獲取所有左側(cè)已選中option值，并在右框末尾填加，然后清除左框選中值。
實現(xiàn)代碼：
<html>
<head></head>
<scripttype="text/javascript">
function goright(j){
var test2=document.test2;
if(j>0){
varleft=test2.list.options;
varright=test2.fly.options;
}else{
varleft=test2.fly.options;
varright=test2.list.options;
}
for(var i=0;i< left.length;i++){
if(left[i].selected){
new_option=newOption(left[i].text,left[i].value);
right[right.length]=new_option;
left[i]=null;
}
}
}
</script>
<body>
<form name="test2">
<tr>
<divstyle="float:left;">
<select size="10"name="list" multiple style="width:300px;">
<optionvalue="http://www.baidu.com">百度
<optionvalue="http://sina.cn">新浪
<option value="3">360
<option value="4">開心網(wǎng)
<option value="5">校內(nèi)網(wǎng)
<option value="6">58同城
<option value="7">趕集
<option value="8">財富
</select>
</div>
<div style="float:left;">
<h2style="font-size:25px;position:reletive;margin-top:50px;background:#ccc;"onclick="goright(1);">--></h2>
<h2style="font-size:25px;position:reletive;top:30px;background:#ccc;"onclick="goright(-1);"><--</h2>
</div>
<div style="float:left;">
<selectsize="10" name="fly" multiplestyle="width:300px;">
</select>
</div>
</tr>
</body>
</html>
問題總結(jié)：
1，通過給goright()傳值1和-1來判斷是左移還是右移實現(xiàn)了簡單通用，但是同一頁面有更多表單則不能實現(xiàn)。
2，選擇多項移動會發(fā)現(xiàn)只有半數(shù)值實現(xiàn)了移動，說明代碼存在bug.
分析：
1，為了實現(xiàn)更加的通用性，需要傳送三個值，表單名稱，左框名稱，右框名稱。但是傳參為字符串，而取值為dom，所以要用到eval();
2,在上面的例子出現(xiàn)bug,是因為首先獲取選取數(shù)量，然后根據(jù)下標(biāo)依次移動，但是移動一次后總數(shù)量發(fā)生了變化，相對下標(biāo)也發(fā)生了變化。第二次移動下標(biāo)為1的值其實是移動的第三個選取值。因此for循環(huán)由i++改為i--;采用倒序移動。
改動代碼如下：
functiongoright(f,i,j){
var left=eval(f+"."+i);
var right=eval(f+"."+j);
var text='';
for( var k=left.options.length-1;k>=0;k--){
if(left.options[k].selected){
new_option=new Option(left.options[k].text,left.options[k].value);
right.options[right.options.length]=new_option;
left.options[k]=null;
}
}
}
需求2：雙擊左框內(nèi)值，則會移動到右側(cè)；同理雙擊右框內(nèi)值則會移動到左側(cè)；
思路：在select標(biāo)簽內(nèi)加入ondblclick="goright()”;雙擊執(zhí)行g(shù)oright()函數(shù)。
改動代碼：
<select size="10" name="list" multiplestyle="width:300px;"ondblclick="goright('test2','list','fly');">
。。。。。
<select size="10" name="fly" multiplestyle="width:300px;"ondblclick="goright('test2','fly','list');">
拓展需求：使用鼠標(biāo)左鍵拖動實現(xiàn)多選，本人在網(wǎng)上找了很多，一直沒有實現(xiàn)。日后找到方法再貼出。
天小編給大家介紹使用css3的animation畫一個太陽系行星公轉(zhuǎn)的動畫，再加以改進，討論如何畫橢圓的運行軌跡。然后分析京東和人人網(wǎng)使用animation的實際案例，最后結(jié)合css3的clip-path做一些比較特別的動畫。
太陽系最終的效果圖如下：
css3的animation是通過關(guān)鍵幀的形式做出來的，首先設(shè)定一個動畫的運行時間，然后在這個時間軸上的若干位置處插入關(guān)鍵幀，瀏覽器根據(jù)關(guān)鍵幀設(shè)定的內(nèi)容做過渡動畫。animation常結(jié)合transform屬性進行制作。以一個簡單的例子說明，以一個div，讓其從左到右運動，如下圖左所未(沒有動畫請刷新下頁面)
先用css畫出靜態(tài)的圖，然后再加動畫的屬性。
整個工程完整的代碼見這個Demo（
地址：http://codepen.io/yincheng/pen/PPKxYV）。
html如下：
<div class='space'> <div class='wheel'> <span class='line'></span> </div></div>
在輪子wheel加一個動畫的屬性，
.wheel{
animation: move 3s linear infinite;
}
這個的意思是動畫的名字是move，時間軸是3s，速度是勻速，播放次數(shù)無限。然后move的關(guān)鍵幀keyframes如下：
@keyframes move{
100%{
transform: translateX(350px);
}
}
即播放到末尾的時候，向X軸右移350px。在0%的時候值0，100%的時候值為350px，時間為3s，還有一個速度曲線的屬性，根據(jù)這些信息做過渡動畫。如果指定速度為線性linear，則動畫的過渡效果是勻速的，對于上面來說就是勻速右移。默認的速度曲線為ease，就是漸進和漸出，中間播放比較快。
然后再給輪子添加一個滾動的效果rotate，用運行的距離除以輪子的周長得出需要滾動多少圈，即375 / (25 * 3.1415926 * 2) * 360=859.4度，也就是在這個區(qū)間向右移動的同時加上自轉(zhuǎn)的效果，所以給transform添加多一個rotate的屬性。
transform: translateX(350px) rotate(859.4deg);
這樣就可以了：
這就是css3的animation動畫，結(jié)合transform的大小、旋轉(zhuǎn)、位移、斜切，通過兩三行代碼，便可做出很多有趣的效果。
接下來討論太陽系的制作，跟上面不同的地方是行星是圍繞著太陽轉(zhuǎn)的，而輪子是圍繞著自己的圓心轉(zhuǎn)的，也就是說他們轉(zhuǎn)的基點不同。可以看出，transform的基點默認是本身的中心center，所以我們要改變行星的進行轉(zhuǎn)換的中心點transform-origin。
完整的Demo（地址：http://codepen.io/yincheng/pen/LpjMzP）。太陽系的html結(jié)構(gòu)如下：
<div class="galaxy"> <div class='sun'></div> <div class='mercury'></div> <div class='venus'></div> <div class='earth'></div> </div>
太陽位于div galaxy的中間，讓其它行星位于太陽的右邊排成一條線。設(shè)置galaxy的width和height都為1300px。sun圖片的大小為100px*100px，所以sun的left值和top值都為(1300 - 100) / 2=600px，這樣sun就位于中間位置。設(shè)置水星mercury的left值為700px，top為625px，這樣水星就位于太陽偏右的位置。然后再設(shè)置transform-origin:
transform-origin: -50px 25px;
transform-origin的原點是作用的元素左上角位置，所以往左移（700 - 1300 / 2)=50px，往下移60 / 2=30px(60為水星高度)，水星轉(zhuǎn)換的基點就變成了太陽的中心，在此基礎(chǔ)上進行旋轉(zhuǎn)：
animation: rotation 2.4s linear infinite;
@keyframes rotation{
to{
transform: rotate(1turn);
}}
注意這里改變了同義的屬性，0%和100%分別換成from和to，360deg換成1turn。
其它的行星，也按照這種方法進行設(shè)置，計算稍微繁瑣。公轉(zhuǎn)的周期以地球10s為基準(zhǔn)，其它按比例換算。這樣就可以做出一個太陽系公轉(zhuǎn)的圖，原理很簡單，效果卻很好。
注意到行星運行的軌跡其實是橢圓形的，上面是用了正圓形。因此，下面討論如何做一個橢圓的運行軌跡。
查看完整的Demo（地址：http://codepen.io/yincheng/pen/QjMzZr）。
效果圖如下：
上面的橢圓在Y軸上被壓扁了，可以考慮在Y軸上添加一個位移變換，原理如下圖所示，首先將地球的初始位置放到橢圓和其短軸的交點處，然后transform-origin設(shè)置為半徑為800px的圓心的位置，但運行時間為50%即到初始位置對面的時候，插入一個關(guān)鍵幀：做一個位移轉(zhuǎn)換，向y軸負方向移動200px，這樣就可以形成一個半橢圓的軌跡，到了100%的時候逐漸恢復(fù)為初始值0，跟前面的半橢圓相反，就可以完成一個完整的橢圓軌跡。
需要在earth的外面包一層div，用來設(shè)置translateY的效果，因為這個效果的時間曲線需要設(shè)置為ease-in-out漸進漸出的效果，讓橢圓運行起來更加的順暢。html的結(jié)構(gòu)如下：
<div class='planet'> <div class='origin-circle'></div> <div class='sun'></div> <div class='track'></div> <div class='moveY'> <div class='earth'></div> </div> </div>
給moveY添加一個translateY的動畫，其它的一樣。
.moveY{ animation: moveY 2s ease-in-out infinite alternate; /* */
}
@keyframes moveY{
to{
transform: translateY(-200px);
}
}
注意這里將moveY的周期設(shè)置為旋轉(zhuǎn)的一半，同時使用了一個transition-direction為alternate的屬性，alternate意為交替，效果等同于
@keyframes moveY{
0%，100%{
transform: translateY(0px);
} 50%{ transform: translateY(-200px);
}}
細心的讀者會發(fā)現(xiàn)，這里的運行軌跡并不是嚴(yán)格的橢圓，旋轉(zhuǎn)是勻速的，但是在y軸上的投影即在y軸上的速度是一條曲線，這條曲線理論上可以用貝賽爾曲線模擬出來，animation的速度參數(shù)改用cubic-bezier去模擬，ease-in-out等同于cubic-bezier(0.4,0,0.6,1)。通過一些數(shù)學(xué)換算理論上是可以模擬的，這里不再深入討論。今天就講到這里了哦！
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
