CSS3 变形记
CSS3 變形
CSS3變形是一些效果的集合，比如平移，旋轉，縮放和傾斜效果，每個效果都稱為變形函數。
transform
transform屬性向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。
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;/*旋轉45度*/transform:rotate(45deg);} </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>旋轉
縮放
.box2{.../*放大了1.5倍*/transform:scale(1.5); }位移
.box2{.../*X軸與Y軸都移動150px*/transform:translate(150px,150px); }傾斜
.box2{.../*X軸傾斜30度*/transform:skew(30deg); }transform-origin
用來指定元素的中心點位置。
transform-origin:x-axis y-axis z-axistransform進行變形時，默認是以元素自己中心點為原點進行變形的。通過transform-origin屬性可以改變元素的中心點，從而以我們指定的點為中心點進行變形。
.box2{...transform-origin:left top; }上例中，元素的中心點從默認的中間點center改為左上角點left top。就是說以左上角的點為基點進行變形。很簡單吧，其他位置的點俺就不一一示范了，另外transform-origin不能改變translate的中點。
transform-style
transform-style屬性規定如何在3D空間中呈現被嵌套的元素。
transform-style:flat | preserver-3d簡單來說，就是能夠創建一個3D空間。讓子元素在3D空間中變形。
perspective
perspective 屬性用來設置用戶和元素3D空間Z平面之間的距離。值越小，3D效果越明顯。
perspective:none | number當元素定義perspective屬性時，其子元素會獲得透視效果，而不是元素本身。如果不指定透視，則Z軸空間中的所有點將平鋪到同一個2D平面中。
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style>/*沒有添加perspective時效果*/#box1 div{position:absolute;}#box1 div img{transform-origin:bottom;}#box1 .box1-1 img{opacity:.5;}#box1 .box1-2 img{transform:rotateX(45deg);}/*添加perspective時效果*/#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>可見，設置了perspective的元素，其3D效果更加明顯了。
另外，在3D變形中，除了perspective屬性可以激活一個3D空間之外，在3D變形的函數中的perspective()也可以激活3D空間。不同的是，perspective屬性用在父元素中，perspective()函數用在當前的子元素中，并且與transform中的其他的函數一起使用。如：
transform:rotate(45deg) perspective(500px);其效果是一樣的。
perspective-origin
用來決定perspective屬性的起點位置就，簡單說就是觀看的視角。
perspective-origin: x-axis y-axis;perspective-origin與perspective屬性一樣，必須定義在父元素的元素上。換句話說，perspective-origin是與perspective結合使用的。
#box2 div{...perspective-origin:bottom right; }右下角效果
左下角效果
左上角效果
右上角效果
上角效果
右角效果
下角效果
左角效果
默認值，中角。
backface-visibility
backface-visibility屬性定義當元素不面向屏幕時是否可見。如果在旋轉元素不希望看到背面時，該屬性很有用。
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{ /*第一個圖片背面不可見*/ 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>兩個圖片正面時可見并無什么變化
兩個圖片反面時，設置了背面不可見的圖片隱藏了正面。
將代碼復制下來在瀏覽器中觀看，可以更好了解。
CSS3 2D變形
2D位移
translate()函數可以把元素從原來的位置移動。
translate(x-axis,y-axis); translate()函數可以取一個值x-axis，也可以取兩個值x-axis,y-axis。
當取一個值時，x-axis代表X軸移動的距離，正值時元素向右移動，負值向左移動。
當取二個值是，x-axis一樣；y-axis代表Y軸，正值時元素向下移動，負值向上移動。
下面是兩張圖片的位移效果，建議將代碼復制在瀏覽器中觀看。
如果要將對象沿著X軸或者Y軸方向移動，除了可以使用translate(x-axis,0)和translate(0,y-axis)來實現。還可以使用translateX()與translateY()兩個函數。
translateX(100px)等于translate(100px,0) translateY(100px)等于translate(0,100px)2D縮放
縮放函數scale()讓元素根據中心原點對元素進行縮放。
scale(x-axis,y-axis);scale()函數與translate()函數的語法相似，可以接受一個值，也可以接受兩個值，只有一個值時，第二個值與第一個值一樣，也就是說X軸與Y軸成比例縮放。默認值為1，當值小于1時，元素縮小；當值大于1時，元素放大。
<!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()函數除了可以取正值，還可以取負值。負值時，會讓元素翻轉后再進行縮放。下面是兩張動畫片段，可以復制在瀏覽器中觀看。
除了能通過scale()函數使元素在X軸和Y軸進行縮放之外，還可以使用scaleX()與scaleY()兩個函數分別在X軸與Y軸縮放。
scaleX(2)相當于scale(2,1) scaleY(2)相當于scale(1,2)另外，縮放函數默認是以中心點為原點進行變形，可以使用transform-origin函數，修改元素的中心點，使縮放函數的效果不同。
2D傾斜
傾斜函數skew()能夠讓元素傾斜顯示。與rotate()函數不同，rotate()函數只能旋轉，不能改變元素形狀；skew()函數不能旋轉，當會改變元素形狀。
skew(x-axis,y-axis) x-axis表示元素X軸傾斜的角度。
y-axis表示元素Y軸傾斜的角度。
與前幾個函數一樣，當只有一個值時，表示的是X軸進行傾斜；二個值時，X軸與Y軸同時傾斜。
<!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軸同時傾斜效果
除了使用scale()函數使X軸與Y軸傾斜之外，還可以使用scaleX()與scaleY()函數讓元素在X軸與Y軸傾斜。
scaleX(30deg)等于scale(30deg,0) scaleY(30deg)等于scale(0,30deg)還可以使用transform-origin屬性修改元素變形的中心點，讓元素有不同的傾斜效果。
2D矩陣
俺正在學習當中。點我我也要去學。
CSS3 3D變形
3D位移
CSS3中3D位移主要包括兩種函數translateZ()和translate3d()。
translateZ(z-axis);功能是讓元素在3D空間沿Z軸進行位移。負值時，元素在視覺上感覺越來越遠，導致元素變小；正值時，元素在視覺上感覺越來越近，導致元素變大了。代碼效果translate3d()函數中。
translate3d(x-axis,y-axis,z-axis);translate3d()函數使一個元素在三維空間移動。是translateX(),translateY(),translateZ()三個函數的縮寫，與translate()函數不同的是，translate()函數只能作用在X軸與Y軸上，也就是在二維平面上移動。
<!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>下面是兩張動畫片段,圖中可以看出Z軸的移動對視覺上的效果。
3D縮放
CSS3 3D變形中的縮放主要有scaleZ()和scale3d()兩種函數。
scaleZ(z-axis);讓元素在Z軸上按比例縮放。
scale3d(x-axis,y-axis,z-axis); 是scaleX，scaleY，scaleZ三個函數的縮寫，scaleZ(2)等于scale3d(1,1,2)。與scale函數不同的是，scale()是在二維平面上進行縮放。scale3d()在三維空間上進行縮放。scale3d()與scaleZ()要與其他函數一起使用才有效果。
建議在使用transform調用函數時，scale3d()或scaleZ()要寫在其他函數之前，不然也沒有效果。
下面是動畫片段
3D旋轉
CSS3中3D旋轉可以使用rotateX(),rotateY(),rotateZ()三個函數分別設置三維空間的旋轉。也可以使用rotate3d()函數集中進行設置，因為效果都是一樣的，俺就選rotate3d()函數來說。
rotate3d(x,y,z,deg);x,y,z代表旋轉的三個軸，取值是0或1，0時代表這個軸不旋轉，1時代表這個軸旋轉。deg代表旋轉的角度。
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>
下面是動畫片段
3D矩陣
學習中...
CSS3 變形就寫到此了。
總結一下最近寫博客的感想。以前不寫博客時，一本書幾天就能看完，而且自己又光看不練，且又不愛復習，那過幾天立馬就忘得干凈了。多次吃虧之下，決定寫博客，做筆記。寫博客的這幾天，一個字“累”，以往看書時感覺不過爾爾，簡單的很，等到自己寫，就糟了，感覺左也不對，右也是錯，這時才知道難啊。寫出來后歡心鼓舞，好不快樂。寫博客累，卻是實在。子曰：學而不思則罔。唯有自己想出來，寫下來，才不會迷惑。鄉下人言語粗鄙，不知所云。
轉載于:https://www.cnblogs.com/fxycm/p/4655669.html
總結
- 上一篇： 2015.7.17( NOI2015 d
- 下一篇： CSS cursor 属性