接着之前的[css]我要用css画幅画(一) ， 今天，我又画一个房子，很简单，屋顶、墙壁、门。
现在开始，做得效果都只兼容chrome，所以下面的css3的属性可能只有-webkit-前缀。 我只是为了兴趣画画， 何必理会兼容性呢，是吧？
html如下：
1 <!DOCTYPE html> 2 <html lang="en" 3 head 4 Meta charset="UTF-8" 5 title>Css Paint</ 6 link rel="stylesheet" type="text/css" href="css/sun.css" /> 7 ="css/house.css" 8 9 body10 div class="sun"11 ="sun-body"></div12 ="sun-shine-light sun-shine-light1"13 ="sun-shine-light sun-shine-light2"14 ="sun-shine-light sun-shine-light3"15 ="sun-shine-light sun-shine-light4"16 ="sun-shine-light sun-shine-light5"17 18 19 ="house-width house"20 ="house-width house-roof house-roof-left"21 ="house-width house-roof house-roof-right"22 ="house-width house-wall"23 24 ="house-wall-door"25 26 ="house-wall-door-handle"27 28 29 30 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 absolute; 11 top:12 width:13 z-index: 9; 14 } 15 .sun-shine-light{ 16 yellow; 17 5px; 18 250px; 19 margin-top:30px; 20 21 22 10; 23 } 24 .sun-shine-light1{ 25 -webkit-transform: rotate(-3deg); 26 -moz-webkit-transform:27 -ms-webkit-transform:28 -o-webkit-transform:29 } 30 .sun-shine-light2{ 31 70px; 32 240px; 33 rotate(10deg); 34 35 36 37 } 38 .sun-shine-light3{ 39 160px; 40 195px; 41 rotate(30deg); 42 -ms-transform:43 -o-transform:44 transform:45 } 46 .sun-shine-light4{ 47 215px; 48 85px; 49 260px; 50 rotate(55deg); 51 52 53 54 } 55 .sun-shine-light5{ 56 200px; 57 -50px; 58 230px; 59 rotate(85deg); 60 61 62 63 }
(新增的house.css）
.house-width { 600px; .house { bottom: 20px; 400px; 10 } 11 12 .house-roof { background: gold; 14 border: 3px solid #000; 15 -30px; 180px; 18 } 19 20 .house-roof-left { border-left-width: 15px; float: left; 23 matrix(0.25,-0.4,1,-298,0); 24 } 25 26 .house-roof-right { matrix(1,0.3,1)">28 } 29 .house-wall { 2px solid #000; 220px; 33 } 34 .house-wall::before{ 37 130px; 38 content:''; -133px; 186px; display: block; 43 } 44 45 .house-wall-door { 46 orange; 0px; 110px; 52 } 53 54 .house-wall-door-handle { 55 brown; 1px solid #000; right: 10px; 90px; 15px; 63 }
下面是code pen中的效果： Sun and house
或者你可以直接看github上的demo效果： http://bee0060.github.io/Css-Paint/pages/sun-house/sun-house-2.html
代码已经上传github：https://github.com/bee0060/Css-Paint
这里用到了以下这个陌生的css：
-webkit-transform: matrix(1,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属性进行设置，若未设置，应该是对象的重心。
今天就到这，谢谢观看。 如有错误，欢迎指正。
