关于前端:用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