CSS3實(shí)現(xiàn)水平旋轉(zhuǎn)動(dòng)畫(huà)

在CSS3中，我們可以使用transform屬性來(lái)實(shí)現(xiàn)水平旋轉(zhuǎn)的動(dòng)畫(huà)效果，以下是一個(gè)簡(jiǎn)單的示例，展示了一個(gè)元素在水平方向上的旋轉(zhuǎn)動(dòng)畫(huà)：

1、HTML結(jié)構(gòu)：

<div class="rotate-container">
  <div class="rotate-item">我是旋轉(zhuǎn)的元素</div>
</div>

2、CSS樣式：

.rotate-container {
  width: 200px;
  height: 200px;
  position: relative;
  overflow: hidden;
}
.rotate-item {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: center; /* 設(shè)置旋轉(zhuǎn)中心 */
  animation: rotate 5s linear infinite; /* 定義旋轉(zhuǎn)動(dòng)畫(huà) */
}
@keyframes rotate {
  from { transform: rotate(0deg); } /* 起始位置 */
  to { transform: rotate(360deg); } /* 結(jié)束位置 */
}

在這個(gè)示例中，我們創(chuàng)建了一個(gè)名為rotate的動(dòng)畫(huà)，其中.rotate-item元素從0度旋轉(zhuǎn)到360度，通過(guò)transform-origin屬性，我們可以設(shè)置旋轉(zhuǎn)的中心點(diǎn)。animation屬性中的linear關(guān)鍵詞表示動(dòng)畫(huà)在整個(gè)過(guò)程中保持相同的速度，而infinite關(guān)鍵詞則表示動(dòng)畫(huà)會(huì)無(wú)限循環(huán)。

你可以根據(jù)自己的需求調(diào)整動(dòng)畫(huà)的持續(xù)時(shí)間、速度曲線(xiàn)以及起始和結(jié)束位置，希望這個(gè)示例能幫助你實(shí)現(xiàn)所需的水平旋轉(zhuǎn)動(dòng)畫(huà)效果！