CSS3 变形记
CSS3 變形
CSS3變形是一些效果的集合，比如平移，旋轉(zhuǎn)，縮放和傾斜效果，每個(gè)效果都稱為變形函數(shù)。
transform
transform屬性向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換。該屬性允許我們對(duì)元素進(jìn)行旋轉(zhuǎn)、縮放、移動(dòng)或傾斜。
transform:none | <transform-function> [<transform-function>] * <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style>div{ width:100px;height:100px;margin:40px;position:absolute;opacity:1;background:rgb(0, 148, 255);}.box2{background:rgb(0, 148, 255);opacity:.5;/*旋轉(zhuǎn)45度*/transform:rotate(45deg);} </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>旋轉(zhuǎn)
縮放
.box2{.../*放大了1.5倍*/transform:scale(1.5); }位移
.box2{.../*X軸與Y軸都移動(dòng)150px*/transform:translate(150px,150px); }傾斜
.box2{.../*X軸傾斜30度*/transform:skew(30deg); }transform-origin
用來指定元素的中心點(diǎn)位置。
transform-origin:x-axis y-axis z-axistransform進(jìn)行變形時(shí)，默認(rèn)是以元素自己中心點(diǎn)為原點(diǎn)進(jìn)行變形的。通過transform-origin屬性可以改變?cè)氐闹行狞c(diǎn)，從而以我們指定的點(diǎn)為中心點(diǎn)進(jìn)行變形。
.box2{...transform-origin:left top; }上例中，元素的中心點(diǎn)從默認(rèn)的中間點(diǎn)center改為左上角點(diǎn)left top。就是說以左上角的點(diǎn)為基點(diǎn)進(jìn)行變形。很簡(jiǎn)單吧，其他位置的點(diǎn)俺就不一一示范了，另外transform-origin不能改變translate的中點(diǎn)。
transform-style
transform-style屬性規(guī)定如何在3D空間中呈現(xiàn)被嵌套的元素。
transform-style:flat | preserver-3d簡(jiǎn)單來說，就是能夠創(chuàng)建一個(gè)3D空間。讓子元素在3D空間中變形。
perspective
perspective 屬性用來設(shè)置用戶和元素3D空間Z平面之間的距離。值越小，3D效果越明顯。
perspective:none | number當(dāng)元素定義perspective屬性時(shí)，其子元素會(huì)獲得透視效果，而不是元素本身。如果不指定透視，則Z軸空間中的所有點(diǎn)將平鋪到同一個(gè)2D平面中。
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style>/*沒有添加perspective時(shí)效果*/#box1 div{position:absolute;}#box1 div img{transform-origin:bottom;}#box1 .box1-1 img{opacity:.5;}#box1 .box1-2 img{transform:rotateX(45deg);}/*添加perspective時(shí)效果*/#box2 div{position:absolute;left:400px;perspective:500px;}#box2 div img{transform-origin:bottom;}#box2 .box2-1 img{opacity:.5;}#box2 .box2-2 img{transform:rotateX(45deg);} </style> </head> <body> <div id="box1"><div class="box1-1"><img src="https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png"></div><div class="box1-2"><img src="https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png"></div> </div> <div id="box2"><div class="box2-1"><img src="https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png"></div><div class="box2-2"><img src="https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png"></div> </div> </body> </html>可見，設(shè)置了perspective的元素，其3D效果更加明顯了。
另外，在3D變形中，除了perspective屬性可以激活一個(gè)3D空間之外，在3D變形的函數(shù)中的perspective()也可以激活3D空間。不同的是，perspective屬性用在父元素中，perspective()函數(shù)用在當(dāng)前的子元素中，并且與transform中的其他的函數(shù)一起使用。如：
transform:rotate(45deg) perspective(500px);其效果是一樣的。
perspective-origin
用來決定perspective屬性的起點(diǎn)位置就，簡(jiǎn)單說就是觀看的視角。
perspective-origin: x-axis y-axis;perspective-origin與perspective屬性一樣，必須定義在父元素的元素上。換句話說，perspective-origin是與perspective結(jié)合使用的。
#box2 div{...perspective-origin:bottom right; }右下角效果
左下角效果
左上角效果
右上角效果
上角效果
右角效果
下角效果
左角效果
默認(rèn)值，中角。
backface-visibility
backface-visibility屬性定義當(dāng)元素不面向屏幕時(shí)是否可見。如果在旋轉(zhuǎn)元素不希望看到背面時(shí)，該屬性很有用。
backface-visibility:visible | hidden; <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style>@keyframes rotate{0%{transform:rotateY(0deg);}100%{transform:rotateY(360deg);}} #box1,#box2{width:300px;height:400px; float:left;margin:0 20px;transform-style: preserve-3d;animation:rotate 3s ease-in-out infinite alternate;}div div {perspective: 1000px;position:absolute;top:0;right:0;bottom:0;left:0;}#box1 div{ /*第一個(gè)圖片背面不可見*/ backface-visibility: hidden;}#box1 .box1-1,#box2 .box2-1{background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png)no-repeat 0 0 / 100% 100%;z-index:2;}#box1 .box1-2,#box2 .box2-2{background:url(https://img.alicdn.com/imgextra/i2/2406102577/TB2cgJ7dVXXXXb3XXXXXXXXXXXX_!!2406102577.png)no-repeat 0 0 / 100% 100%;transform:rotateY(180deg);} </style> </head> <body> <div id="box1"><div class="box1-1"></div><div class="box1-2"></div> </div> <div id="box2"><div class="box2-1"></div><div class="box2-2"></div> </div> </body> </html>兩個(gè)圖片正面時(shí)可見并無什么變化
兩個(gè)圖片反面時(shí)，設(shè)置了背面不可見的圖片隱藏了正面。
將代碼復(fù)制下來在瀏覽器中觀看，可以更好了解。
CSS3 2D變形
2D位移
translate()函數(shù)可以把元素從原來的位置移動(dòng)。
translate(x-axis,y-axis); translate()函數(shù)可以取一個(gè)值x-axis，也可以取兩個(gè)值x-axis,y-axis。
當(dāng)取一個(gè)值時(shí)，x-axis代表X軸移動(dòng)的距離，正值時(shí)元素向右移動(dòng)，負(fù)值向左移動(dòng)。
當(dāng)取二個(gè)值是，x-axis一樣；y-axis代表Y軸，正值時(shí)元素向下移動(dòng)，負(fù)值向上移動(dòng)。
下面是兩張圖片的位移效果，建議將代碼復(fù)制在瀏覽器中觀看。
如果要將對(duì)象沿著X軸或者Y軸方向移動(dòng)，除了可以使用translate(x-axis,0)和translate(0,y-axis)來實(shí)現(xiàn)。還可以使用translateX()與translateY()兩個(gè)函數(shù)。
translateX(100px)等于translate(100px,0) translateY(100px)等于translate(0,100px)2D縮放
縮放函數(shù)scale()讓元素根據(jù)中心原點(diǎn)對(duì)元素進(jìn)行縮放。
scale(x-axis,y-axis);scale()函數(shù)與translate()函數(shù)的語(yǔ)法相似，可以接受一個(gè)值，也可以接受兩個(gè)值，只有一個(gè)值時(shí)，第二個(gè)值與第一個(gè)值一樣，也就是說X軸與Y軸成比例縮放。默認(rèn)值為1，當(dāng)值小于1時(shí)，元素縮小；當(dāng)值大于1時(shí)，元素放大。
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style> @-webkit-keyframes scale{from{transform:scale(-3);} 100%{transform:scale(5);}} @keyframes scale{from{transform:scale(-3);} 100%{transform:scale(5);}}div{position:absolute;left:40%;top:40%;width:70px;height:100px;background:url(https://img.alicdn.com/imgextra/i2/2406102577/TB24namdVXXXXbXXXXXXXXXXXXX_!!2406102577.png) no-repeat scroll 0 0 / 100% 100%;-webkit-animation:scale 1s ease infinite alternate;animation:scale 3s ease infinite alternate;} </style> </head> <body> <div></div> </body> </html>scale()函數(shù)除了可以取正值，還可以取負(fù)值。負(fù)值時(shí)，會(huì)讓元素翻轉(zhuǎn)后再進(jìn)行縮放。下面是兩張動(dòng)畫片段，可以復(fù)制在瀏覽器中觀看。
除了能通過scale()函數(shù)使元素在X軸和Y軸進(jìn)行縮放之外，還可以使用scaleX()與scaleY()兩個(gè)函數(shù)分別在X軸與Y軸縮放。
scaleX(2)相當(dāng)于scale(2,1) scaleY(2)相當(dāng)于scale(1,2)另外，縮放函數(shù)默認(rèn)是以中心點(diǎn)為原點(diǎn)進(jìn)行變形，可以使用transform-origin函數(shù)，修改元素的中心點(diǎn)，使縮放函數(shù)的效果不同。
2D傾斜
傾斜函數(shù)skew()能夠讓元素傾斜顯示。與rotate()函數(shù)不同，rotate()函數(shù)只能旋轉(zhuǎn)，不能改變?cè)匦螤?#xff1b;skew()函數(shù)不能旋轉(zhuǎn)，當(dāng)會(huì)改變?cè)匦螤睢?/p> skew(x-axis,y-axis)
x-axis表示元素X軸傾斜的角度。
y-axis表示元素Y軸傾斜的角度。
與前幾個(gè)函數(shù)一樣，當(dāng)只有一個(gè)值時(shí)，表示的是X軸進(jìn)行傾斜；二個(gè)值時(shí)，X軸與Y軸同時(shí)傾斜。
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style>div {width: 100px;height: 100px;background: hsl(102, 100%, 50%);transform:skew(30deg);} </style> </head> <body> <div></div> </body> </html>元素X軸傾斜效果
div {...transform:skew(0,30deg); }元素Y軸傾斜效果
div {...transform:skew(30deg,30deg); }元素X軸與Y軸同時(shí)傾斜效果
除了使用scale()函數(shù)使X軸與Y軸傾斜之外，還可以使用scaleX()與scaleY()函數(shù)讓元素在X軸與Y軸傾斜。
scaleX(30deg)等于scale(30deg,0) scaleY(30deg)等于scale(0,30deg)還可以使用transform-origin屬性修改元素變形的中心點(diǎn)，讓元素有不同的傾斜效果。
2D矩陣
俺正在學(xué)習(xí)當(dāng)中。點(diǎn)我我也要去學(xué)。
CSS3 3D變形
3D位移
CSS3中3D位移主要包括兩種函數(shù)translateZ()和translate3d()。
translateZ(z-axis);功能是讓元素在3D空間沿Z軸進(jìn)行位移。負(fù)值時(shí)，元素在視覺上感覺越來越遠(yuǎn)，導(dǎo)致元素變小；正值時(shí)，元素在視覺上感覺越來越近，導(dǎo)致元素變大了。代碼效果translate3d()函數(shù)中。
translate3d(x-axis,y-axis,z-axis);translate3d()函數(shù)使一個(gè)元素在三維空間移動(dòng)。是translateX(),translateY(),translateZ()三個(gè)函數(shù)的縮寫，與translate()函數(shù)不同的是，translate()函數(shù)只能作用在X軸與Y軸上，也就是在二維平面上移動(dòng)。
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style>@-webkit-keyframes translate3d {0% {transform: translate3d(-30px,-20px,-300px);}100% {transform: translate3d(30px,20px,200px);}}@keyframes translate3d {0% {transform: translate3d(-30px,-20px,-300px);}100% {transform: translate3d(30px,20px,200px);}}body {transform-style: preserve-3d;perspective: 1000px;}.box1 {position:absolute;width: 70px;height: 100px;background: url(https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png) no-repeat 0 0 / 100% 100%;-webkit-animation: translate3d 2s ease-in-out infinite alternate;animation: translate3d 2s ease-in-out infinite alternate;position:absolute;top:30px;left:20%;}.box2{background: url(https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png) no-repeat 0 0 / 100% 100%;opacity:.5;width: 70px;height: 100px;position:absolute;top:30px;left:20%;}</style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>下面是兩張動(dòng)畫片段,圖中可以看出Z軸的移動(dòng)對(duì)視覺上的效果。
3D縮放
CSS3 3D變形中的縮放主要有scaleZ()和scale3d()兩種函數(shù)。
scaleZ(z-axis);讓元素在Z軸上按比例縮放。
scale3d(x-axis,y-axis,z-axis); 是scaleX，scaleY，scaleZ三個(gè)函數(shù)的縮寫，scaleZ(2)等于scale3d(1,1,2)。與scale函數(shù)不同的是，scale()是在二維平面上進(jìn)行縮放。scale3d()在三維空間上進(jìn)行縮放。scale3d()與scaleZ()要與其他函數(shù)一起使用才有效果。
建議在使用transform調(diào)用函數(shù)時(shí)，scale3d()或scaleZ()要寫在其他函數(shù)之前，不然也沒有效果。
下面是動(dòng)畫片段
3D旋轉(zhuǎn)
CSS3中3D旋轉(zhuǎn)可以使用rotateX(),rotateY(),rotateZ()三個(gè)函數(shù)分別設(shè)置三維空間的旋轉(zhuǎn)。也可以使用rotate3d()函數(shù)集中進(jìn)行設(shè)置，因?yàn)樾Ч际且粯拥?#xff0c;俺就選rotate3d()函數(shù)來說。
rotate3d(x,y,z,deg);x,y,z代表旋轉(zhuǎn)的三個(gè)軸，取值是0或1，0時(shí)代表這個(gè)軸不旋轉(zhuǎn)，1時(shí)代表這個(gè)軸旋轉(zhuǎn)。deg代表旋轉(zhuǎn)的角度。
rotateX(45deg)等于rotate3d(1,0,0,45deg) rotateY(45deg)等于rotate3d(0,1,0,45deg) rotateZ(45deg)等于rotate3d(0,0,1,45deg) rotateX(45deg);rotateY(45deg);等于rotate3d(1,1,0,45deg) ...<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style>@keyframes rotate3d{0%{transform:rotate3d(0,0,0,0);}100%{transform:rotate3d(1,1,1,45deg);}}html,body{transform-style: preserve-3d;perspective: 1200px;}div{width: 70px;height: 100px;position:absolute;}.box1{left:40%;top:40px;background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png) no-repeat scroll 0 0 /100% 100%;z-index:2;animation:rotate3d 1s ease-in-out infinite alternate;}.box2{left:40%;top:40px;opacity:.5;background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png) no-repeat scroll 0 0 /100% 100%;} </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>
下面是動(dòng)畫片段
3D矩陣
學(xué)習(xí)中...
CSS3 變形就寫到此了。
總結(jié)一下最近寫博客的感想。以前不寫博客時(shí)，一本書幾天就能看完，而且自己又光看不練，且又不愛復(fù)習(xí)，那過幾天立馬就忘得干凈了。多次吃虧之下，決定寫博客，做筆記。寫博客的這幾天，一個(gè)字“累”，以往看書時(shí)感覺不過爾爾，簡(jiǎn)單的很，等到自己寫，就糟了，感覺左也不對(duì)，右也是錯(cuò)，這時(shí)才知道難啊。寫出來后歡心鼓舞，好不快樂。寫博客累，卻是實(shí)在。子曰：學(xué)而不思則罔。唯有自己想出來，寫下來，才不會(huì)迷惑。鄉(xiāng)下人言語(yǔ)粗鄙，不知所云。
轉(zhuǎn)載于:https://www.cnblogs.com/fxycm/p/4655669.html
總結(jié)
- 上一篇： 2015.7.17( NOI2015 d
- 下一篇： 原型设计工具