[Css] I want to use css to draw images (3) and css to draw images

[Css] I want to use css to draw images (3) and css to draw images

Next I used the previous [css] To draw images with css (2). Today I drew a villain named James.

 

Only the added content of this modification is listed below

The html is as follows:

1 <div class = "human left-190 bottom-25"> 2 <p class = "lines"> Hello everyone, my name is James </p> 3 <div class = "human-head-normal"> </div> 4 <div class = "human-body-normal"> </div> 5 <div class = "human-arms-normal"> </div> 6 <div class = "human-legs-normal"> </div> 7 </div>Human

 

Css:

1. left-190 {2 left: pixel PX; 3} 4 5. bottom-25 {6 bottom: 25px; 7} 8 9. human {10 height: 170px; 11 width: 120px; 12 13 position: absolute; 14} 15 16. lines {17 position: absolute; 18 top:-20px; 19 width: 220px; 20 display: block; 21} 22 23. human-head-normal {24 border: 2px solid #000; 25 height: 40px; 26 width: 40px; 27 border-radius: 50%; 28 position: absolute; 29 top: 20px; 30 left: 35px; 31} 32. human-body-normal {33 height: 60px; 34 width: 3px; 35 background: #000; 36 left: 55px; 37 top: 62px; 38 position: absolute; 39} 40 41. human-arms-normal {42 width: 80px; 43 height: 3px; 44 position: absolute; 45 background: #000; 46 left: 18px; 47 top: 75px; 48} 49 50. human-legs-normal {51 height: 50px; 52 width: 50px; 53 border: 3px solid #000; 54 border-bottom: none; 55 border-right: none; 56 position: absolute; 57 left: 55px; 58 top: 120px; 59 60-webkit-transform: rotate (45deg); 61-webkit-transform-origin: 1px 1px; 62}Human.css

 

The following figure shows the effect of the code pen: Sun-house-human.

Or you can look at the demo effect on github: http://bee0060.github.io/Css-Paint/pages/sun-house-3.html

Code has been uploaded to github: https://github.com/bee0060/Css-Paint

 

The following strange css is used:

-Webkit-transform-origin: 1px 1px;

 

The previous two articles used transform and made some guesses about transform-origin, but they have not been tested in person. This time I finally used it.

 

The transform-origin attribute is used to set the deformation origin. The deformation is based on the origin.

Related MDN documentation: https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-origin

The default value of this attribute is:

-Webkit-transform-origin: 50% 50% 0;

That is, the center of gravity of the object.

 

The first parameter describes the horizontal displacement of the origin on the object (hereinafter referred to as x), the second parameter is the vertical displacement (hereinafter referred to as y), and the third parameter is not quite understandable, it should be a vertical offset value (that is, the z axis coordinate in the three-dimensional ry). The original statement in this document is to define the deformation center distance from the user's line of sight (z = 0 ).<length>(Cannot be<percentage>) Offset value.

 

The first two parameters both accept the following types of values:

1. length, that is, the <length> mentioned above, such as 1px, 1em, and 1pt. However, it is not allowed to use only numbers as values, such as 1.

2. percentage, that is, the <percentage> mentioned above, such as 50%.

3. Location descriptor, including left, right, top, bottom, and center.

X can use left, right, and center, and y can use top, bottom, and center.

When both x and y use location descriptors, the parameter locations can be in different order, that is, the following two types are allowed:

-Webkit-transform-origin: left top;

-Webkit-transform-origin: top left;

The browser automatically identifies the corresponding descriptors of x and y. However, if not both parameters use the location descriptor, they must strictly follow the location of x and y, and the location descriptor cannot be in conflict, the following statements are considered invalid:

-Webkit-transform-origin: top 2px;

-Webkit-transform-origin: left right;

 

To avoid unnecessary troubles, it is recommended that you strictly write the parameters according to their locations.

 

From the example above, we can see that the first two parameters allow accepting different types of values, for example, one using a location Descriptor and the other using a percentage.

In addition, you can set 1-3 parameters for the transform-origin attribute.

 

This is today. Thank you for watching. If any error occurs, please correct it.

 

PS: After I painted a villain, I told my wife that the painting was finished, but she said that when she was a child, she had to draw such a painting, at least there would be clouds, trees, railings ....... For such a "requirement", I can only say: "I can't do it !" Cloud and big tree are beyond my capacity. Now, just draw a villain.