css3 rotate 菜鸟

CSS3 旋转是一种非常方便和有用的 CSS 技巧，可以通过旋转元素来创建惊人的效果。下面介绍如何实现旋转 div> 元素。

div class="rotate">
        p>
    这是一个旋转的 DIV/p>
    /div>
.rotate {
        transform: rotate(30deg);
     /* 带前缀的支持不同浏览器 */    -webkit-transform: rotate(30deg);
        -moz-transform: rotate(30deg);
}
    

以上的 div> 元素将被旋转 30 度。可以通过修改角度数值来调整旋转的程度。

如果想要在中间旋转，只需简单地添加更多的 CSS 属性：

.rotate {
        position: relative;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) rotate(30deg);
     /* 旋转和 translate */    -webkit-transform: translate(-50%, -50%) rotate(30deg);
        -moz-transform: translate(-50%, -50%) rotate(30deg);
}
    

这将使元素相对于中心旋转。CSS3 旋转可以帮助你创建一些惊人的效果和动画。赶快试试吧！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！