接着之前的[css]我要用css画幅画(一) ， 今天，我又画一个房子，很简单，屋顶、墙壁、门。
现在开始，做得效果都只兼容chrome，所以下面的css3的属性可能只有-webkit-前缀。 我只是为了兴趣画画， 何必理会兼容性呢，是吧？
html如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Css Paint</title> 6 <link rel="stylesheet" type="text/css" href="css/sun.css" /> 7 <link rel="stylesheet" type="text/css" href="css/house.css" /> 8 </head> 9 <body> 10 <div class="sun"> 11 <div class="sun-body"></div> 12 <div class="sun-shine-light sun-shine-light1"></div> 13 <div class="sun-shine-light sun-shine-light2"></div> 14 <div class="sun-shine-light sun-shine-light3"></div> 15 <div class="sun-shine-light sun-shine-light4"></div> 16 <div class="sun-shine-light sun-shine-light5"></div> 17 </div> 18 19 <div class="house-width house"> 20 <div class="house-width house-roof house-roof-left"></div> 21 <div class="house-width house-roof house-roof-right"></div> 22 <div class="house-width house-wall"> 23 24 <div class="house-wall-door"> 25 26 <div class="house-wall-door-handle"></div> 27 </div> 28 </div> 29 </div> 30 </body> 31 </html>
css如下：
(原来的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 .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 .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 .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 .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 .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
(新增的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
下面是code pen中的效果： Sun and house
这里用到了以下这个陌生的css：
-webkit-transform: matrix(1, 0, 0.3, 1, 0, 0); （由于任性的我只兼容chrome， 所以这里都带有-webkit前缀， 如果你要在FIREFOX下用，就改成-moz-前缀吧）
matrix， 我在画屋顶时用到它，matrix是用于画矩形的。
matrix的MDN文档在此：https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform
另外，你可以在这里试验这个属性不同参数下的表现：http://www.css88.com/tool/css3Preview/Transform-Matrix.html
matrix接受6个参数, 这六个参数均接受正负小数：
1. 表示宽度的变性比例， 1表示100%，即不变， 0.25表示只有原本的25%。
2. 我的猜测是：表示以原点为基准，原点左边向上倾斜变形、原点右边向下倾斜变形的数值，这个数值是倾斜变形角度的正切函数的值，也就是当你输入1的时候，会顺时针倾斜45度，因为tan45 = 1。或者叫做倾斜的斜率。
3. 我的猜测是：表示以原点为基准，原点之上向左倾斜变形、原点之下向右倾斜变形的斜率。 该数值越大，倾斜变形越严重。
4.表示高度的变性比例， 1表示100%，即不变， 0.25表示只有原本的25%。
5.表示横向位移的像素值， 该参数只接受数字，不需要填写单位（px）。当你写100时，就向左平移了100px。 也可以输入负数。
6.表示纵向位移的像素值， 其他同上。
上面提到的“原点”， 可以通过transform-origin属性进行设置，若未设置，应该是对象的重心。
今天就到这，谢谢观看。 如有错误，欢迎指正。