关于前端:用css的transform属性实现一个翻转字符

本文将用 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