鼠標懸停在文字上時，文字會出現旋轉效果。這種效果實現的原理是，將每個文字或者單詞的每個字母在任一軸（最好是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>