利用css3的 transform-origin 畫一顆愛心

 首先是基礎css(去除margin,padding),而且設置背景色.

*{margin:0;padding: 0;}
body{font-size: 12px;background:#886565;font-family: "微軟雅黑";}

2:建立一個容器,裏面就是放內容的

.heart{position:relative;width: 100px;height:80px;background:blue;margin: 100px auto;}

效果圖以下:

接下來:

.heart:before{position: absolute;content: "";left:50px;top:0;width:50px;height: 80px;background: red;border-radius: 50px 50px 0 0;}

讓紅色部分以左下角爲基點,逆時針旋轉45度.加入下面代碼:

transform-origin: left bottom;transform:rotate(-45deg);

接下來再畫一個紅色圓柱:

.heart:after{position: absolute;content: "";left:0;top:0;width:50px;height: 80px;background: red;border-radius: 50px 50px 0 0;}

效果圖以下:

讓第二個圓柱以右下角爲基點,順時針旋轉45度,加入下面的代碼:

transform-origin: right bottom;transform:rotate(45deg);

效果圖以下:

哇哈哈,愛心已經出來了,如今把容器的背景色去掉: