站長(zhǎng)資訊網(wǎng)
在css3中，可以使用transform屬性配合translate()、scale()、rotate()、skew()、skewX()、skewY()等函數(shù)實(shí)現(xiàn)元素的2d轉(zhuǎn)化，將元素進(jìn)行旋轉(zhuǎn)，縮放，移動(dòng)，傾斜等。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
在css3中，可以使用transform屬性實(shí)現(xiàn)2d轉(zhuǎn)化。
Transform屬性應(yīng)用于元素的2D或3D轉(zhuǎn)換。這個(gè)屬性允許你將元素旋轉(zhuǎn)，縮放，移動(dòng)，傾斜等。
transform屬性實(shí)現(xiàn)2d轉(zhuǎn)化的函數(shù)
| 值 | 描述 |
|---|---|
| matrix(n,n,n,n,n,n) | 定義 2D 轉(zhuǎn)換，使用六個(gè)值的矩陣。 |
| translate(x,y) | 定義 2D 轉(zhuǎn)換。 |
| translateX(x) | 定義轉(zhuǎn)換，只是用 X 軸的值。 |
| translateY(y) | 定義轉(zhuǎn)換，只是用 Y 軸的值。 |
| scale(x[,y]?) | 定義 2D 縮放轉(zhuǎn)換。 |
| scaleX(x) | 通過設(shè)置 X 軸的值來定義縮放轉(zhuǎn)換。 |
| scaleY(y) | 通過設(shè)置 Y 軸的值來定義縮放轉(zhuǎn)換。 |
| rotate(angle) | 定義 2D 旋轉(zhuǎn)，在參數(shù)中規(guī)定角度。 |
| skew(x-angle,y-angle) | 定義沿著 X 和 Y 軸的 2D 傾斜轉(zhuǎn)換。 |
| skewX(angle) | 定義沿著 X 軸的 2D 傾斜轉(zhuǎn)換。 |
| skewY(angle) | 定義沿著 Y 軸的 2D 傾斜轉(zhuǎn)換。 |
示例：
<!DOCTYPE html> <html> <head> <style> *, *:after, *:before { box-sizing: border-box; } body { background: #F5F3F4; margin: 0; padding: 10px; font-family: 'Open Sans', sans-serif; text-align: center; } h2, h4 { font-weight: 400; color: #4d4d4d; } .card { display: inline-block; margin: 10px; background: #fff; padding: 10px; min-width: 180px; box-shadow: 0 3px 5px #ddd; color: #555; } .card .box { width: 60px; height: 60px; margin: auto; background: #ddd; cursor: pointer; box-shadow: 0 0 5px #ccc inset; } .card .box .fill { width: 60px; height: 60px; position: relative; background: #03A9F4; opacity: .5; box-shadow: 0 0 5px #ccc; -webkit-transition: 0.3s; transition: 0.3s; } .card p { margin: 25px 0 0; } .rotate:hover .fill { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .scale:hover .fill { -webkit-transform: scale(2, 2); transform: scale(2, 2); } .scaleX:hover .fill { -webkit-transform: scaleX(2); transform: scaleX(2); } .scaleY:hover .fill { -webkit-transform: scaleY(2); transform: scaleY(2); } .skew:hover .fill { -webkit-transform: skew(45deg, 45deg); transform: skew(45deg, 45deg); } .skewX:hover .fill { -webkit-transform: skewX(45deg); transform: skewX(45deg); } .skewY:hover .fill { -webkit-transform: skewY(45deg); transform: skewY(45deg); } .translate:hover .fill { -webkit-transform: translate(45px, 1em); transform: translate(45px, 1em); } .translateX:hover .fill { -webkit-transform: translateX(45px); transform: translateX(45px); } .translateY:hover .fill { -webkit-transform: translateY(45px); transform: translateY(45px); } .matrix:hover .fill { -webkit-transform: matrix(2, 2, 0, 2, 45, 0); transform: matrix(2, 2, 0, 2, 45, 0); } </style> </head> <body> <!-- Rotate--> <div class="card"> <div class="box rotate"> <div class="fill"></div> </div> <p>rotate(45deg) </p> </div> <!-- scale--> <div class="card"> <div class="box scale"> <div class="fill"></div> </div> <p>scale(2)</p> </div> <div class="card"> <div class="box scaleX"> <div class="fill"></div> </div> <p>scaleX(2) </p> </div> <div class="card"> <div class="box scaleY"> <div class="fill"></div> </div> <p>scaleY(2) </p> </div> <!-- skew--> <div class="card"> <div class="box skew"> <div class="fill"></div> </div> <p>skew(45deg, 45deg) </p> </div> <div class="card"> <div class="box skewX"> <div class="fill"></div> </div> <p>skewX(45deg)</p> </div> <div class="card"> <div class="box skewY"> <div class="fill"></div> </div> <p>skewY(45deg)</p> </div> <!-- translate--> <div class="card"> <div class="box translate"> <div class="fill"></div> </div> <p>translate(45px) </p> </div> <div class="card"> <div class="box translateX"> <div class="fill"></div> </div> <p>translateX(45px)</p> </div> <div class="card"> <div class="box translateY"> <div class="fill"></div> </div> <p>translateY(45px)</p> </div> <div class="card"> <div class="box matrix"> <div class="fill"></div> </div> <p> matrix(2, 2, 0, 2, 45, 0)</p> </div> </body> </html>
（學(xué)習(xí)視頻分享：css視頻教程、web前端）
