The transform property of the CSS implements a flip character

This article will use rotateY to show you a flipped character

1. Achieve results

2. The transform is introduced

The transform property applies 2D or 3D transformations to elements. This property allows you to rotate, scale, move, or tilt elements. Grammar:

transform: none|transform-functions;
Copy the code

Eg:

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

RotateY (Angle) : Defines 3D rotation along the Y-axis.

3. An HSL () function

Grammar:

hsl(hue, saturation, lightness)
Copy the code

Eg:

p1 {background-color:hsl(120.100%,50%); }/ * * / green
#p2 {background-color:hsl(120.100%,75%); }/ * green * /
#p3 {background-color:hsl(120.100%,25%); }Dark green / * * /
#p4 {background-color:hsl(120.60%,70%); }/* Soft green */
Copy the code

The HSL () function uses hue, saturation, and brightness to define colors.

HSL refers to Hue, Saturation and brightness (English: Hue, Saturation, Lightness).

Hue (H) is the basic attribute of color, it is commonly said color name, such as red, yellow and so on. Saturation (S) refers to the purity of color. The higher the color is, the purer it will be. The lower the color will become gray gradually, and the value is 0-100%. Brightness (L), 0-100%, increase the brightness, the color will change to white; Reduce the brightness and the color changes to black.

Intuitively:

4. Complete code

codePen demo