接着之前的[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 }
(新增的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 }
下面是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屬性進行設置，若未設置，應該是對象的重心。
今天就到這，謝謝觀看。 如有錯誤，歡迎指正。