滑鼠懸停在文字上時，文字會出現旋轉效果。這種效果實作的原理是，将每個文字或者單詞的每個字母在任一軸（最好是Y軸）一起旋轉。
每個文字或者單詞都包裹在<li>标記中，然後使用CSS：hover Selector選擇器，我們将在Y軸上旋轉每個文字。
我們将把文字分為兩部分，在第一部分中，我們将建立旋轉文本的HTML基本結構。
在第二部分中，通過CSS實作将滑鼠懸停在該文本時，它将使該文本結構可旋轉。
在本文中，我們将使用HTML建立結構。
HTML：在此，我們建立了一個無序清單，并将每個字母包裝在一個list-item（li）中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>web前端開發</title>
</head>
<body>
<ul>
<li>歡</li>
<li>迎</li>
<li>關</li>
<li>注</li>
<li>W</li>
<li>e</li>
<li>B</li>
<li>前</li>
<li>端</li>
<li>開</li>
<li>發</li>
<li>公</li>
<li>衆</li>
<li>号</li>
</ul>
</body>
</html> CSS結構：在本文中，我們将使該結構可旋轉并添加一點裝飾。
CSS代碼：首先，我們提供了一些基本樣式，例如邊距，填充和背景。然後，我們使用float屬性将清單項水準對齊。
最後，使用懸停選擇器将每個字母沿Y軸旋轉特定角度。如果需要，可以使用第n個屬性來延遲每個字母的旋轉。其他屬性的使用根據個人喜好和需求來，是以，你可以随意使用它。
<style>
body {
margin: 0;
padding: 0;
}
ul {
padding: 50px;
margin: 0;
position: absolute;
top: 20%;
left: 25%;
}
ul li {
list-style: none;
color: #03aabc;
float: left;
font-size: 40px;
transition: 0.8s;
}
ul:hover li {
transform: rotateY(360deg);
}
</style> 最終解決方案：這是上述兩個代碼的組合。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>web前端開發</title>
<style>
body {
margin: 0;
padding: 0;
}
ul {
padding: 50px;
margin: 0;
position: absolute;
top: 20%;
left: 25%;
}
ul li {
list-style: none;
color: #03aabc;
float: left;
font-size: 40px;
transition: 0.8s;
}
ul:hover li {
transform: rotateY(360deg);
}
</style>
</head>
<body>
<ul>
<li>歡</li>
<li>迎</li>
<li>關</li>
<li>注</li>
<li>W</li>
<li>e</li>
<li>B</li>
<li>前</li>
<li>端</li>
<li>開</li>
<li>發</li>
<li>公</li>
<li>衆</li>
<li>号</li>
</ul>
</body>
</html> 最終結果如下：
本文完