CSS上下旋轉(zhuǎn)是一種很有趣的效果，可以讓網(wǎng)頁呈現(xiàn)出動(dòng)感和趣味性。下面我們通過代碼來實(shí)現(xiàn)這個(gè)效果。

.rotate-up-down{
animation: up-down 1s ease-in-out infinite;
-webkit-animation: up-down 1s ease-in-out infinite; /* Safari 和 Chrome */
}
@keyframes up-down{
0% { transform: rotateX(0deg); }
50% { transform: rotateX(180deg); }
100% { transform: rotateX(0deg); }
}
@-webkit-keyframes up-down{ /* Safari 和 Chrome */
0% { -webkit-transform: rotateX(0deg); }
50% { -webkit-transform: rotateX(180deg); }
100% { -webkit-transform: rotateX(0deg); }
}

上面的代碼中，我們先創(chuàng)建了一個(gè)類名為rotate-up-down，在該類名下定義了animation和-webkit-animation，用來控制動(dòng)畫的效果。我們需要實(shí)現(xiàn)上下旋轉(zhuǎn)的效果，所以定義了一個(gè)名為up-down的動(dòng)畫，在其中實(shí)現(xiàn)了0%-50%和50%-100%兩個(gè)時(shí)間段內(nèi)的旋轉(zhuǎn)效果。

在類名rotate-up-down下的元素中，只需要添加該類名即可實(shí)現(xiàn)上下旋轉(zhuǎn)的效果。例如：

<div class="rotate-up-down"></div>

上面的代碼中，我們在一個(gè)div元素上添加了rotate-up-down類名，從而實(shí)現(xiàn)了該元素的上下旋轉(zhuǎn)效果。