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
- 下一篇: 原型设计工具