[css]我要用css画幅画(二)

接着之前的[css]我要用css画幅画(一) ， 今天，我又画一个房子，很简单，屋顶、墙壁、门。

现在开始，做得效果都只兼容chrome，所以下面的css3的属性可能只有-webkit-前缀。 我只是为了兴趣画画， 何必理会兼容性呢，是吧？

html如下：

.house-width {
width: 600px;
}

.house {
bottom: 20px;
height: 400px;
left: 600px;
position: absolute;
}

.house-roof {
background: gold;
border: 3px solid #000;
left: -30px;
height: 180px;
position: relative;
}

.house-roof-left {
border-left-width: 15px;
float: left;
-webkit-transform: matrix(0.25, 0, -0.4, 1, -298, 0);
}

.house-roof-right {
-webkit-transform: matrix(1, 0, 0.3, 1, 0, 0);
}

.house-wall {
border: 2px solid #000;
height: 220px;
}
.house-wall::before{
border: 2px solid #000;
height: 220px;
width:130px;
content:'';
left: -133px;
top: 186px;
position: absolute;
display: block;
}

.house-wall-door {
background: orange;
bottom: 0px;
height: 180px;
left: 110px;
position: absolute;
width: 110px;
}

.house-wall-door-handle {
background: brown;
border: 1px solid #000;
border-radius: 50%;
height: 15px;
position: absolute;
right: 10px;
top: 90px;
width:15px;
}

house.css

下面是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, 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属性进行设置，若未设置，应该是对象的重心。

今天就到这，谢谢观看。 如有错误，欢迎指正。

下一篇：[css]我要用css画幅画(三)