css旋轉和動畫

1、css實現2d旋轉：

2d的方法有，會影響該元素的全部zi'yuan'su

• translate()
• rotate()
• scale()
• skew()
• matrix()

translate()

經過 translate() 方法，元素從其當前位置移動，根據給定的 left（x 座標） 和 top（y 座標） 位置參數：

.demo{

transform: translate(10px,20px);

}

rotate()  經過rotate()方法能夠將元素進行旋轉正數時順時針，負數是逆時針。該方法旋轉會將以前使用translate方法平移的位移也給一樣旋轉

.demo{

transform: rotate(30deg);

}

scale()   經過 scale() 方法，元素的尺寸會增長或減小，根據給定的寬度（X 軸）和高度（Y 軸）參數：元素的邊框和裏面的字體都會同事增長或減小。能夠是負數。負數會改變裏面字體的顯示（若是x爲負數  則左右互反，若是y爲負數，則上下互反）；

.demo{

transform: scale(2,4);

}

skew() 經過skew（）方法  能夠將元素按照給定的參數（x軸和y軸）進行翻轉，正數爲順時針，負數爲逆時針

.demo{

transform: skew(30deg,20deg);

}

matrix()

matrix() 方法把全部 2D 轉換方法組合在一塊兒。

matrix() 方法須要六個參數，包含數學函數，容許您：旋轉、縮放、移動以及傾斜元素。

 

2、css實現3d旋轉：

rotateX() 方法

經過 rotateX() 方法，元素圍繞其 X 軸以給定的度數進行旋轉。

.demo{

transform: rotateX(120deg);

}

rotateY() 方法

經過 rotateY() 方法，元素圍繞其 Y軸以給定的度數進行旋轉。

.demo{

transform: rotateY(120deg);

}

3、css實現動畫

使用css3的animation和@keyframes  實現css動畫效果：

animation：至少規定動畫名稱和動畫時間（默認是0）  才能讓動畫起效果

animation兩種使用方式：

一、：

animation-name: myfirst;//動畫名稱
animation-duration: 5s;//規定動畫完成一個週期所花費的秒或毫秒。默認是 0。
animation-timing-function: linear;//規定動畫的速度曲線。默認是 "ease"。

linear	動畫從頭至尾的速度是相同的。
ease	默認。動畫以低速開始，而後加快，在結束前變慢。
ease-in	動畫以低速開始。
ease-out	動畫以低速結束。
ease-in-out	動畫以低速開始和結束。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函數中本身的值。可能的值是從 0 到 1 的數值。

animation-delay: 2s; //可選。定義動畫開始前等待的時間，以秒或毫秒計。默認值是 0。   若是是負值  表明跨越了動畫的前面一段時間
animation-iteration-count: infinite;// 動畫播放的次數   默認值是 1 ；infinite是能夠無限次播放
animation-direction: alternate; //規定動畫是否在下一週期逆向地播放。默認是 "normal"。  normal是正常播放   alternate是動畫應該輪流反向播放  
animation-play-state: running; //規定動畫是否正在運行或暫停。默認是 "running"。   running是正在播放  paused  是暫停

二、：

animation: myfirst 5s linear 2s infinite alternate;

@keyframes:    用百分比來規定變化發生的時間，或用關鍵詞 "from" 和 "to"，等同於 0% 和 100%。

                         0% 是動畫的開始，100% 是動畫的完成。

                        爲了獲得最佳的瀏覽器支持，您應該始終定義 0% 和 100% 選擇器。

.demo{

animation:myfirst 5s;

}

規則定義方式一：

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}

@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}

規則定義方式二：

@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-o-keyframes myfirst /* Opera */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}