本文将使用rotateY给大家展示一个翻转的字符1.实现效果2.transform简介transform属性对元素进行2D或3D变换。此属性允许我们旋转、缩放、移动或倾斜元素。语法：transform:none|transform-functions;例如：变换：旋转（7deg）；-ms变换：旋转（7度）；/*IE9*/-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%);}/*green*/#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%，增加亮度，颜色会变成白色；降低亮度，颜色将变为黑色。直观上：值描述色调——色调定义色调（0到360）——0（或360）为红色，120为绿色，240为蓝色饱和度——饱和度定义饱和度；0%为灰色，100%全彩亮度-亮度定义0%为暗，50%为正常，100%为白色4.完整代码codePendemo
