[Css] I want to use css to draw images (2). css to draw images

[Css] I want to use css to draw images (2). css to draw images

Next I will use the previous [css] css to draw a picture (1). Today I will draw another house, which is very simple: the roof, walls, and doors.

 

At the beginning, the effects are only compatible with chrome, so the following css3 attributes may only have the-webkit-prefix. I am only interested in painting. Why bother with compatibility?

 

The html is as follows:

1 <! DOCTYPE html> 2  

Css:

(Original sun.css)

1. sun {2 position: relative; 3} 4 5. sun-body {6 background-color: red; 7 border-radius: 50%; 8 height: 300px; 9 left:-100px; 10 position: absolute; 11 top:-100px; 12 width: 300px; 13 z-index: 9; 14} 15. sun-shine-light {16 background-color: yellow; 17 height: 5px; 18 left: 250px; 19 margin-top: 30px; 20 position: relative; 21 width: 300px; 22 z-index: 10; 23} 24. the sun-shine-light1 {25-webkit-transform: rotate (-3deg); 26-moz-webkit-transform: rotate (-3deg); 27-ms-webkit-transform: rotate (-3deg); 28-o-webkit-transform: rotate (-3deg); 29} 30. the sun-shine-light2 {31 top: 70px; 32 left: 240px; 33-webkit-transform: rotate (10deg); 34-moz-webkit-transform: rotate (10deg ); 35-ms-webkit-transform: rotate (10deg); 36-o-webkit-transform: rotate (10deg); 37} 38. the sun-shine-light3 {39 top: 160px; 40 left: 195px; 41-webkit-transform: rotate (30deg); 42-ms-transform: rotate (30deg); 43-o-transform: rotate (30deg); 44 transform: rotate (30deg); 45} 46. the sun-shine-light4 {47 top: 215px; 48 left: 85px; 49 width: 260px; 50-webkit-transform: rotate (55deg); 51-ms-transform: rotate (55deg ); 52-o-transform: rotate (55deg); 53 transform: rotate (55deg); 54} 55. the sun-shine-light5 {56 top: 200px; 57 left:-50px; 58 width: 230px; 59-webkit-transform: rotate (85deg); 60-ms-transform: rotate (85deg ); 61-o-transform: rotate (85deg); 62 transform: rotate (85deg); 63}Sun.css

(Newly added house.css)

1. house-width {2 width: 600px; 3} 4 5. house {6 bottom: 20px; 7 height: 400px; 8 left: 600px; 9 position: absolute; 10} 11 12. house-roof {13 background: gold; 14 border: 3px solid #000; 15 left:-30px; 16 height: 180px; 17 position: relative; 18} 19 20. house-roof-left {21 border-left-width: 15px; 22 float: left; 23-webkit-transform: matrix (0.25, 0,-0.4, 1,-298, 0); 24} 25 26. house-roof-right {27-webkit-transform: matrix (1, 0, 0.3, 1, 0, 0); 28} 29 30. house-wall {31 border: 2px solid #000; 32 height: 220px; 33} 34. house-wall: before {35 border: 2px solid #000; 36 height: 220px; 37 width: 130px; 38 content: ''; 39 left:-133px; 40 top: 186px; 41 position: absolute; 42 display: block; 43} 44 45. house-wall-door {46 background: orange; 47 bottom: 0px; 48 height: 180px; 49 left: 110px; 50 position: absolute; 51 width: 110px; 52} 53 54. house-wall-door-handle {55 background: brown; 56 border: 1px solid #000; 57 border-radius: 50%; 58 height: 15px; 59 position: absolute; 60 right: 10px; 61 top: 90px; 62 width: 15px; 63}House.css

 

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

 

The following strange css is used:

-Webkit-transform: matrix (1, 0, 0.3, 1, 0, 0, if you want to use it in FIREFOX, change it to the-moz-prefix)

 

Matrix, which is used when I draw a roof. matrix is used to draw a rectangle.

The MDN documentation for matrix is here: https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform

In addition, you can test the performance of this property under different parameters here: http://www.css88.com/tool/css3Preview/Transform-Matrix.html

 

Matrix accepts six parameters, both of which are positive and negative decimals:

1. It indicates the ratio of the transgender of the width. 1 indicates 100%, that is, it remains unchanged. 0.25 indicates that only the original 25% is used.

2. my guess is: it refers to the value that uses the origin as the reference, the left-side Tilt Deformation of the origin, and the right-side Tilt Deformation of the origin. This value is the tangent function value of the Tilt Deformation angle, that is, when you enter 1, it will tilt 45 degrees clockwise, because tan45 = 1. Or the slope of the slope.

3. My guess is: it indicates the slope of the source based on the source, which is skewed to the left and to the right under the source. The larger the value, the more serious the skew deformation.

4. It indicates the ratio of the height to the transgender. 1 indicates 100%, that is, the ratio remains unchanged. 0.25 indicates that only the original 25% is used.

5. It indicates the pixel value of the horizontal displacement. This parameter only accepts numbers and does not need to be filled in px ). When you write 100, PX is translated to the left. You can also enter a negative number.

6. It indicates the pixel value of the vertical displacement. The others are the same as above.

 

The "origin" mentioned above can be set through the transform-origin attribute. If it is not set, it should be the center of gravity of the object.

 

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