CSS3技術(shù)的應(yīng)用范圍不斷擴(kuò)大，其動(dòng)態(tài)效果也越來(lái)越豐富。其中，無(wú)限水平翻轉(zhuǎn)的效果是非常炫酷且實(shí)用的，它可以在網(wǎng)站設(shè)計(jì)中起到畫龍點(diǎn)睛的作用。

要實(shí)現(xiàn)無(wú)限水平翻轉(zhuǎn)的效果，需要運(yùn)用CSS3 3D變換的屬性，具體的代碼如下：

.box {
position: relative;
perspective: 1000px;
}
.item {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 1s;
transform-origin: 0 50% 0;
}
.item.is-flipped {
transform: rotateY(180deg);
}
.item.back {
transform: rotateY(-180deg);
}

上述代碼中，.box類用于設(shè)置翻轉(zhuǎn)容器，其中perspective屬性代表視距，它的大小決定了翻轉(zhuǎn)的距離，一般設(shè)置為1000像素。 .item類用于設(shè)置翻轉(zhuǎn)元素，其中transform-style屬性的值為preserve-3d，則元素內(nèi)的子元素會(huì)沿著3D空間呈現(xiàn)。而transition屬性用于設(shè)置翻轉(zhuǎn)過(guò)程的動(dòng)畫效果，這里設(shè)置為1秒的時(shí)間。transform-origin屬性則代表元素翻轉(zhuǎn)時(shí)的起始點(diǎn)。 .item.is-flipped類用于設(shè)置翻轉(zhuǎn)后的位置，transform屬性設(shè)置元素繞Y軸旋轉(zhuǎn)180度，即實(shí)現(xiàn)了翻轉(zhuǎn)效果。 .item.back類用于設(shè)置翻轉(zhuǎn)的背面元素。它與.item.is-flipped類似，只不過(guò)旋轉(zhuǎn)方向相反，從而在翻轉(zhuǎn)時(shí)呈現(xiàn)出背面元素的樣式。 通過(guò)上述代碼，我們就可以輕松實(shí)現(xiàn)無(wú)限水平翻轉(zhuǎn)效果，能夠?yàn)榫W(wǎng)站設(shè)計(jì)添加一份時(shí)尚和個(gè)性化。