CSS3中的2D變換讓我們可以在網(wǎng)頁上實現(xiàn)各種形式的動畫效果，并且可以實現(xiàn)復(fù)雜的位置、大小、傾斜、旋轉(zhuǎn)等變換。下面來一一介紹。

//平移變換
.transform{
transform: translate(100px, 50px);
}
//縮放變換
.transform{
transform: scale(1.5, 1.5);
}
//旋轉(zhuǎn)變換
.transform{
transform: rotate(45deg);
}
//傾斜變換
.transform{
transform: skew(30deg, 45deg);
}
//組合變換
.transform{
transform: translate(100px, 50px) rotate(45deg) scale(1.5, 1.5);
}

另外，我們還可以使用CSS3中的transition屬性，實現(xiàn)動畫效果的平滑過渡。

.box {
width: 100px;
height: 100px;
background-color: blue;
transition: width 2s, height 2s, background-color 2s;
}
.box:hover {
width: 200px;
height: 200px;
background-color: red;
}

在使用2D變換時，可以通過transform-origin屬性來指定變換的原點(diǎn)，默認(rèn)值為元素中心點(diǎn)。

.box {
width: 100px;
height: 100px;
background-color: blue;
transform: rotate(45deg);
transform-origin: top left;
}

CSS3中的2D變換是現(xiàn)代Web設(shè)計的重要組成部分，通過靈活應(yīng)用，可以實現(xiàn)獨(dú)具特色的頁面效果。