Transform總結

CSS3動畫的屬性主要分為三類：transform、transition以及animation。

Transform:(css3?2D 轉換)

注意：這些效果疊加時，中間用空格隔開

作用：能夠對元素進行移動、縮放、轉動、拉長、拉伸

轉換：使元素改變形狀、尺寸、位置的一種效果

Transform：2D的轉換方法：

2D的轉換

rotate

設置元素順時針旋轉的角度，用法是：transform: rotate(x);

參數x必須是以deg結尾的角度數或0，可為負數表示反向。

scale

設置元素放大或縮小的倍數，用法包括：

transform: scale(a); ? ? ? ? ? ? ? ? ?元素x和y方向均縮放a倍

transform: scale(a, b);????????????? 元素x方向縮放a倍，y方向縮放b倍

transform: scaleX(a);??????????????? 元素x方向縮放a倍，y方向不變

transform: scaleY(b);??????????????? 元素y方向縮放b倍，x方向不變

Transform:2D詳細轉換方法：

2D詳細轉換

translate()方法：

通過translate()方法，元素從其當前位置移動，根據給定的left(x坐標)和top(y坐標)位置.(參數為負數時，反方向移動物體，其基點默認為元素中心點，也可以根據transform-origin進行改變基點)

translate 設置元素的位移，用法為：
transform: translate(a, b);? ? ? ? ? ? ? ? 元素x方向位移a，y方向位移b
transform: translateX(a);? ? ? ? ? ? ? ? ? 元素x方向位移a，y方向不變
transform: translateY(b);? ? ? ? ? ? ? ? ? 元素y方向位移b，x方向不變

skew

設置元素傾斜的角度，用法包括：

transform: skew(a, b);????????????? 元素x方向逆時針傾斜角度a，y方向順時針傾斜角度b

transform: skewX(a);??????????????? 元素x方向逆時針傾斜角度a，y方向不變

transform: skewY(b);??????????????? 元素y方向順時針傾斜角度b，想方向不變

以上的參數均必須是以deg結尾的角度數或0，可為負數表示反向。

matrix

設置元素的變形矩陣，因為矩陣變形過于復雜，暫略。

(1)translateX(n):transform:translateX(100px);

(2)translateY(n):transform:translateY(20px);

(3)translate(x,y):transform:translate(100px,20px);

注意：translate(100px);認為和translateX(100px)等價。

Rotate(angle)方法：

通過rotate(),元素順時針旋轉給定的角度。允許負值，元素將逆時針旋轉

Transform:rotate(30deg);

Transform:rotate(120deg);

Transform:rotate(-30deg);

Scale()方法：

通過scale()方法，元素的尺寸會增加或減少，根據給定的寬度(X軸)和高度(Y軸)參數。（中心點：元素的中心位置，縮放基數為1，大于1就放大，小于1就縮小）

（1）scaleX()方法：transform:scaleX(2);

值scaleX（2)把寬度轉換為原始尺寸的2倍

（2）scaleY()方法：transform:scaleY(2);

ScaleY(2)把高度度轉換為原始尺寸的2倍

（3）scale()方法：transform:scale(2,1.5);

值scale（2,2)把寬度轉換為原始尺寸的2倍，高度度轉換為原始尺寸的2倍

注意：scale（2）與scale(2,2)等價

Skew(angle)方法：

通過skew()方法，元素翻轉給定的角度，根據給定的水平線（X軸）和垂直線(Y軸)參數（中心點：元素中心）

（1）skewX(angle):transform:skewX(30deg);

值skewX(30deg)圍繞X軸把元素翻轉30度。

（2）skewY(angle):transform:skewY（30deg）

值skewY(30deg)圍繞Y軸把元素翻轉30度。

(3)skew(x-angle,y-angle):transform:skew(30deg,10deg);

值skew(30deg,20deg)圍繞X軸把元素翻轉30度，圍繞Y軸翻轉20度。

注意：skew(30deg)等價于skewX(30deg）

Matrix()方法:

Matrix()方法把所有2D轉換方法組合在一起。

Matrix()方法需要六個參數，包含數學函數，允許您：旋轉，縮放，移動，傾斜元素。

Transform-origin(x,y)方法：

改變元素的基點位置。

X和y的值：百分值，em，px，關鍵字。

Left,center,right是水平方向取值：

Left=0%;center=50%;right:100%;

Top,center,bottom是垂直方向的取值：

Top=0%;center=50%;bottom=100%;

如果只取一個值，表示垂直方向值不變（center）

1、top left | left top等價于0 0 | 0% 0%

2、top | top center | center top等價于50% 0

3、right top | top right等價于100% 0

4、left | left center | center left等價于0 50% | 0% 50%

5、center | center center等價于50% 50%（默認值）

6、right | right center | center right等價于100% 50%

7、bottom left | left bottom等價于0 100% | 0% 100%

8、bottom | bottom center | center bottom等價于50% 100%

9、bottom right | right bottom等價于100% 100%

Css3 3D轉換

Css3 transform方法：

Transform-style:

規定如何在3D空間中呈現被嵌套的元素，該屬性必須與transform屬性一同使用。該屬性設置在父元素中

Transform-style:flat|preserve-3d

Perspective:

Perspective:number|none;

perspective屬性定義3D元素距視圖的距離，以像素計。該屬性允許您改變3D元素,查看3D元素的視圖。

注意：
（1）當為元素定義perspective屬性時，其子元素會獲得透視效果，而不是元素本身。

（2）與perspective-origin屬性一同使用該屬性，這樣就能改變3D元素的底部位置

（3）我們可以簡單的理解為視距，用來設置用戶和元素3D空間Z平面之間的距離。而其效應由他的值來決定，值越小，用戶與3D空間Z平面距離越近，視覺效果更令人印象深刻；反之，值越大，用戶與3D空間Z平面距離越遠，視覺效果就很小。（perspective取值越小，3D效果就越明顯，也就是你的眼睛越靠近真3D。）

Perspective-origin:

Perspective-origin:x-axisy-axis;

定義3D元素所基于的X軸和Y軸。該屬性允許您改變3D元素的底部位置。當為元素定義perspective-origin屬性時，其子元素會獲得透視效果，而不是元素本身。(該屬性必須與perspective屬性一同使用，而且只影響3D轉換元素)

注意：為了指轉換子元素變形的深度，perspective-origin屬性必須定義父元素上。通常perspective-origin屬性本身不做任何事情，它必須被定義在設置了perspective屬性的元素上。換句話說，perspective-origin屬性需要與perspective-origin屬性結合起來使用，以便將視點移至元素的中心以外位置

Backface-visibility:隱藏被旋轉元素的背面

Backgace-visibility:visible|hidden;

Translate3d()

transform:translate(30px,30px,200px);

Transform:translate3d(30px,30px,-200px);

當z軸值越大時，元素也離觀看者更近，從視覺上元素就變得更大；反之其值越小時，元素也離觀看者更遠，從視覺上元素就變得更小。

TranslateZ():

Transform:translateZ(200px);

Transform:translateZ(-200px);

使用translateZ()函數可以讓元素在Z軸進行位移，當其值為負值時，元素在Z軸越移越遠，導致元素變得較小。反之，當其值為正值時，元素在Z軸越移越近，導致元素變得較大。

ScaleZ():

默認值為1，當值大于1時，元素放大，反之小于1大于0.01時，元素縮小。

ScaleZ(-1)定義了一個原點在z軸的對稱點

單獨使用沒有效果，需配合其他變形函數一起使用才會有效果

Transform:scale(5) rotateX(45deg);

Transform:scale(.25) rotateX(45deg);

RotateX(angle),rotateY(angle),rotateZ(angle):

圍繞X/Y/Z軸旋轉，angle為旋轉的角度，可以是正值，順時針旋轉，可以是負值，逆時針旋轉

Rotate3d(x,y,z,angle):

·x：是一個0到１之間的數值，主要用來描述元素圍繞X軸旋轉的矢量值；

·y：是一個０到１之間的數值，主要用來描述元素圍繞Y軸旋轉的矢量值；

·z：是一個０到１之間的數值，主要用來描述元素圍繞Z軸旋轉的矢量值；

·a：是一個角度值，主要用來指定元素在3D空間旋轉的角度，如果其值為正值，元素順時針旋轉，反之元素逆時針旋轉。

Transform:rotateX(45deg);

Transform:rotateY(45deg);

Transform:rotateZ(45deg);

Transform:rotate3d(.6,1,.6,45deg);

origin

設置元素的懸掛點，用法包括：

transform-origin: a b;??????????????? 元素的懸掛點為(a, b)

元素的懸掛點即為它旋轉和傾斜時的中心點。取值中的a、b可以是長度值、以%結尾的百分比或者left、top、right、bottom四個值。

transition

transition-property
指定transition效果作用的CSS屬性，其值是CSS屬性名。

transition-duration

動畫效果持續的時間，其值為以s結尾的秒數。

transition-timing-function

transition-delay

動畫效果推遲開始執行的時間，其值為以s結尾的秒數。

CSS3動畫的生命周期如下圖所示，從中可以清楚的看出duration和delay之間的關系：

animation

CSS3中真正的動畫屬性是animation，而前面的transform和transition都只是對DOM元素的變形或者是狀態的過渡。實際上，CSS3所支持的動畫效果只是填充動畫，也就是說先設定整個動畫生命周期中的幾個關鍵狀態（key ?frame，關鍵幀），然后動畫將自行計算并模擬關鍵幀之間的過渡。那么在設置animation的屬性之前就必須先設定好關鍵幀了。

關鍵幀@keyframes的語法結構如下：

@keyframesNAME {

a% {

/*CSS屬性*/

}

b% {

/*CSS屬性*/

}

...

}

NAME表示動畫的名字；a%、b%表示以百分號結尾的百分數，用于設定該關鍵幀在動畫生命周期中的位置；百分數后面的{ } 中則需要寫成該關鍵幀狀態下CSS屬性的值。另外，如果同一個百分數值在@keyframes中出現多次，那么后出現的將覆蓋先出現的；并且關鍵幀在@keyframes中時無序的。

設置完關鍵幀后就可以繼續設定animation了。

animation-name

指定選用的動畫的名字，即keyframes中的NAME。

animation-duration

同transition-duration。

animation-timing-function

同transition-timing-function。

animation-delay

同transition-delay。

animation-iteration-count

設定動畫執行的次數，其值可以是數字也可以是infinite（循環執行）。

animation-direction

設定動畫執行的方向，其值可以是normal（正常順序播放）或alternate（反向播放）。

前綴

因為CSS3還沒有正式發布，所以各種瀏覽器對它的支持也不盡相同。所以在設置CSS3屬性（包括@開頭的新屬性）的時候通常需要對其添加瀏覽器標識的前綴，如-webkit- 表示Webkit內核的瀏覽器Chrome和Safari，-moz- 表示Fire Fox，-o- 表示Opera。無視IE吧，在IE上的實現通常還是要用到濾鏡，而不是CSS3。

實例

下面的代碼模擬了上述大部分的CSS3動畫屬性，由于只使用了–webkit- 前綴，所以只能在Chrome或Safari下正常運行。

HTML代碼：

<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>

<title>CSS3動畫</title>
<link type="text/css"rel="stylesheet"href="animation.css"/>
</head>
<body>
<div class="rotate">rotate</div>
<div class="scale">scale</div>
<div class="translate">translate</div>
<div class="skew">skew</div>
<div class="origin">origin</div>
<div class="single">single property</div>
<div class="whole">whole property</div>
<div class="resume">change & resume</div>
<div class="animation">animation</div>
</body>
</html>

CSS3動畫

CSS代碼：

animation.css

div {width:80px;height:30px;line-height:30px;text-align:center;background:#06f;color:#fff;font-family:Arial,Helvetica,sans-serif;-webkit-border-radius:10px;margin:5px;}
.rotate?{-webkit-transform:?rotate(0deg);}
.rotate:hover?{-webkit-transform:?rotate(90deg);}
.scale?{-webkit-transform:?scale(1);}
.scale:hover?{-webkit-transform:?scale(1.5);}
.translate?{-webkit-transform:?translate(0px,0px);}
.translate:hover?{-webkit-transform:?translate(50px,50px);}
.skew?{-webkit-transform:?skew(0);}
.skew:hover?{-webkit-transform:?skewY(20deg);}
.origin?{-webkit-transform-origin:topleft;-webkit-transform:?rotate(0);}
.origin:hover?{-webkit-transform:?rotate(45deg);}
.single?{width:150px;}
.single:hover?{background:#f00;width:200px;height:100px;line-height:100px;-webkit-transition-property:?background;-webkit-transition-duration:2s;}
.whole?{width:150px;}
.whole:hover?{width:200px;height:100px;line-height:100px;background:#f00;-webkit-transition-duration:2s;}
.resume?{width:150px;-webkit-transition-duration:2s;}
.resume:hover?{width:200px;height:100px;line-height:100px;background:#f00;-webkit-transition-duration:2s;}
.animation:hover?{-webkit-animation-name:?anim;-webkit-animation-duration:2s;-webkit-animation-timing-function:?linear;-webkit-animation-direction:?alternate;-webkit-animation-iteration-count:?infinite;}
@-webkit-keyframes?anim?{
    0%{width:80px;height:30px;line-height:30px;background:#06F;}
    50%{width:140px;height:65px;line-height:65px;background:#360;}
    100%{width:200px;height:100px;line-height:100px;background:#f00;}
}

最后編輯于：2017.11.27 03:26:02

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
沈念sama閱讀 230,431評論 6贊 544
死咒
序言：濱河連續發生了三起死亡事件，死亡現場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發現死者居然都...
沈念sama閱讀 99,637評論 3贊 429
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
開封第一講書人閱讀 178,555評論 0贊 383
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長。經常有香客問我，道長，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 63,900評論 1贊 318
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
茶點故事閱讀 72,629評論 6贊 412
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著，像睡著了一般。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發上，一...
開封第一講書人閱讀 55,976評論 1贊 328
城市分裂傳說
那天，我揣著相機與錄音，去河邊找鬼。笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。我是一名探鬼主播，決...
沈念sama閱讀 43,976評論 3贊 448
雙鴛鴦連環套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
開封第一講書人閱讀 43,139評論 0贊 290
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當地人在樹林里發現了一具尸體，經...
沈念sama閱讀 49,686評論 1贊 336
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內容為張勛視角年9月15日...
茶點故事閱讀 41,411評論 3贊 358
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發現自己被綠了。大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 43,641評論 1贊 374
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
沈念sama閱讀 39,129評論 5贊 364
?日本核電站爆炸內幕
正文年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發生泄漏。R本人自食惡果不足惜，卻給世界環境...
茶點故事閱讀 44,820評論 3贊 350
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 35,233評論 0贊 28
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監牢的瞬間，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 36,567評論 1贊 295
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。一個月前我還...
沈念sama閱讀 52,362評論 3贊 400
代替公主和親
正文我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 48,604評論 2贊 380

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

Transform總結

Transform總結

CSS3動畫的屬性主要分為三類：transform、transition以及animation。

Transform:(css3?2D 轉換)

Transform：2D的轉換方法：

rotate

Transform:2D詳細轉換方法：

translate()方法：

Rotate(angle)方法：

Scale()方法：

Skew(angle)方法：

Matrix()方法:

Transform-origin(x,y)方法：

Css3 3D轉換

Css3 transform方法：

Transform-style:

Perspective:

Perspective:number|none;

Perspective-origin:

Perspective-origin:x-axisy-axis;

Backface-visibility:隱藏被旋轉元素的背面

Backgace-visibility:visible|hidden;

Translate3d()

transform:translate(30px,30px,200px);

Transform:translate3d(30px,30px,-200px);

TranslateZ():

Transform:translateZ(200px);

Transform:translateZ(-200px);

ScaleZ():

Transform:scale(5) rotateX(45deg);

Transform:scale(.25) rotateX(45deg);

RotateX(angle),rotateY(angle),rotateZ(angle):

Rotate3d(x,y,z,angle):

Transform:rotateX(45deg);

Transform:rotateY(45deg);

Transform:rotateZ(45deg);

Transform:rotate3d(.6,1,.6,45deg);

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

Transform總結

CSS3動畫的屬性主要分為三類：transform、transition以及animation。

Transform:(css3?2D 轉換)

Transform：2D的轉換方法：

rotate

Transform:2D詳細轉換方法：

translate()方法：

Rotate(angle)方法：

Scale()方法：

Skew(angle)方法：

Matrix()方法:

Transform-origin(x,y)方法：

Css3 3D轉換

Css3 transform方法：

Transform-style:

Perspective:

Perspective:number|none;

Perspective-origin:

Perspective-origin:x-axisy-axis;

Backface-visibility:隱藏被旋轉元素的背面

Backgace-visibility:visible|hidden;

Translate3d()

transform:translate(30px,30px,200px);

Transform:translate3d(30px,30px,-200px);

TranslateZ():

Transform:translateZ(200px);

Transform:translateZ(-200px);

ScaleZ():

Transform:scale(5) rotateX(45deg);

Transform:scale(.25) rotateX(45deg);

RotateX(angle),rotateY(angle),rotateZ(angle):

Rotate3d(x,y,z,angle):

Transform:rotateX(45deg);

Transform:rotateY(45deg);

Transform:rotateZ(45deg);

Transform:rotate3d(.6,1,.6,45deg);

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频