HTML+css学习（1）

今天从图书馆借了一本HTML5的书，开始部分作者给了一个简单的网页制作的例子，自己照着书上的源码敲了一下，但是呈现的结果和书上的不一样，

<span style="font-size:18px;">h4 {
    color :#F47D31;
    background-color :#fff;
    -webkit-box-shadow :2px 2px 20px #888;
    -webkit-transform :rotate(-45deg);
    -moz-box-shadow : 2px 2px 20px #888;
    -moz-transform :rotate(-45deg);
    position :absolute ;
    padding:0px 150px;
    top:50px;
    left :-120px;
    text-align :center ;
}/*h4的文字为“HTML5 Rocks”*/</span>

本来应该是这样的，但是自己的却没有旋转的效果，网上查了一下，才知道是浏览器的事情。（自己用的是IE，所以上面的旋转语句在IE上不会表现出来）不同浏览器对CSS3的支持是不同的，对于旋转效果应该这样定义：

（W3School给出的）

div
{
transform: rotate(45deg);
transform-origin:20% 40%;

-ms-transform: rotate(45deg); 		/* IE 9 */
-ms-transform-origin:20% 40%; 		/* IE 9 */

-webkit-transform: rotate(45deg);	/* Safari 和 Chrome */
-webkit-transform-origin:20% 40%;	/* Safari 和 Chrome */

-moz-transform: rotate(45deg);		/* Firefox */
-moz-transform-origin:20% 40%;		/* Firefox */

-o-transform: rotate(45deg);		/* Opera */
-o-transform-origin:20% 40%;		/* Opera */
}

而且对于旋转角度也是有点懵，下面这条语句的效果是这样的：

<span style="font-size:18px;">-moz-transform: rotate(45deg);</span>

所以我自己的总结是：rotate(45deg)->以自己的中心顺时针旋转45度；rotate(-45deg)逆时针旋转45度。