css3旋转代码兼容 |css输入框文字点击消失

/* 旋转45度 */
-webkit-transform: rotate(45deg); /* Safari 和 Chrome */
-moz-transform: rotate(45deg); /* Firefox */
-o-transform: rotate(45deg); /* Opera */
transform: rotate(45deg); /* IE9+ 和其他现代浏览器 */

上述代码是一种比较通用的写法，它适用于大部分的情况。在使用时，可以根据实际情况进行相应的调整。

另外，在某些情况下，大家需要在旋转元素的同时保持其位置不变。这时可以加上 transform-origin 属性，来控制旋转的基点。

/* 旋转45度，基点在左上角 */
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
/* 旋转基点在左上角 */
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
-o-transform-origin: left top;
transform-origin: left top;

通过上述代码的演示，大家可以发现，CSS3旋转效果虽然存在兼容性问题，但是针对不同的浏览器，大家可以采用不同的代码写法，来达到最好的兼容效果。