本文將用rotateY為大家展示一個翻轉的字符

1.實現效果

2.transform介紹

transform 屬性向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。
語法：

transform: none|transform-functions;

eg：

transform:rotate(7deg);
-ms-transform:rotate(7deg);     /* IE 9 */
-moz-transform:rotate(7deg);     /* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg);     /* Opera */

rotateY(angle) ：定義沿着 Y 軸的 3D 旋轉。

3.hsl() 函數

語法：

hsl(hue, saturation, lightness)

eg：

p1 {background-color:hsl(120,100%,50%);} /* 綠色 */
#p2 {background-color:hsl(120,100%,75%);} /* 淺綠  */
#p3 {background-color:hsl(120,100%,25%);} /* 暗綠  */
#p4 {background-color:hsl(120,60%,70%);} /* 柔和的綠色 */

hsl() 函數使用色相、飽和度、亮度來定義顏色。

HSL 即色相、飽和度、亮度（英語：Hue, Saturation, Lightness）。

色相（H）是色彩的基本屬性，就是平常所説的顏色名稱，如紅色、黃色等。
飽和度（S）是指色彩的純度，越高色彩越純，低則逐漸變灰，取 0-100% 的數值。
亮度（L），取 0-100%，增加亮度，顏色會向白色變化；減少亮度，顏色會向黑色變化。

直觀的來看：

4.完整代碼

codePen demo