• 技术文章 >web前端 >前端问答

    css3控制旋转方向的属性是什么

    长期闲置长期闲置2022-04-22 18:32:36原创487

    css3控制旋转方向的属性是transform属性;该属性与scale()方法配合使用可以控制元素的2d旋转方向,该属性与scale3d()方法配合使用可控制元素的3d旋转方向,语法为“transform:rotate3d(x,y,z)”。

    本教程操作环境:windows10系统、CSS3&&HTML5版本、Dell G3电脑。

    css3控制旋转方向的属性是什么

    在CSS3中,可以利用transform功能实现文字或图像的旋转、缩放、倾斜、移动这4中类型的变形处理。

    浏览器支持

    到目前为止:Safari3.1以上、Chrome8以上、Firefox4以上、Opera10以上浏览器支持该属性。

    2d旋转

    使用rotate方法,在参数中加入角度值,角度值后面跟表示角度单位的“deg”文字即可,旋转方向为顺时针方向。

    transform:rotate(45deg);

    3D旋转

    分别使用rotateX方法、rotateY方法、rotateZ方法使元素围绕X轴、Y轴、Z轴旋转,在参数中加入角度值,角度值后面跟表示角度单位的deg文字即可,旋转方向为顺时针旋转。

    transform:rotateX(45deg);
    transform:rotateY(45deg);
    transform:rotateZ(45deg);
    transform:rotateX(45deg) rotateY(45deg) rotateZ(45deg);
    transform:scale(0.5) rotateY(45deg) rotateZ(45deg);

    示例如下:

    <html>
    <head>
    <style> 
    div
    {
    margin:30px;
    width:200px;
    height:100px;
    background-color:yellow;
    /* Rotate div */
    transform:rotate(9deg);
    -ms-transform:rotate(9deg); /* Internet Explorer */
    -moz-transform:rotate(9deg); /* Firefox */
    -webkit-transform:rotate(9deg); /* Safari 和 Chrome */
    -o-transform:rotate(9deg); /* Opera */
    }
    </style>
    </head>
    <body>
    <div>Hello World</div>
    </body>
    </html>

    输出结果:

    888.png

    (学习视频分享:css视频教程

    以上就是css3控制旋转方向的属性是什么的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css
    上一篇:css3有阴影效果吗 下一篇:rgba在css3的含义是什么
    20期PHP线上班

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• css3向标题添加阴影的代码是什么• css怎么设置背景居中不平铺• web前端笔试题库之CSS篇• 手把手带你使用CSS绘制一个可爱卡通狮子动画• css3双线边框是什么意思
    1/1

    PHP中文网