• 技术文章 >web前端 >css教程

    css中的角度单位有哪些?

    青灯夜游青灯夜游2020-11-20 16:26:05原创1090

    css中的角度单位有:1、deg,度(Degress),一个圆共360度;2、grad,梯度(Gradians),一个圆共400梯度;3、rad,弧度(Radians),一个圆共2π弧度;4、turn,圈(Turns),一个圆共1圈。

    css中的角度单位

    1、deg

    度(Degress)。一个圆共360度

    90deg = 100grad = 0.25turn ≈ 1.570796326794897rad

    4.png

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <style>
    .test{
    height:100px;background:#eee;
    -moz-transform:rotate(2deg);
    -webkit-transform:rotate(2deg);
    -o-transform:rotate(2deg);
    -ms-transform:rotate(2deg);
    transform:rotate(2deg);
    }
    </style>
    </head>
    <body>
    <div>transform:rotate(2deg);</div>
    </body>
    </html>

    2、grad

    梯度(Gradians)。一个圆共400梯度

    90deg = 100grad = 0.25turn ≈ 1.570796326794897rad

    3.png

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <style>
    .test{
    height:100px;background:#eee;
    -moz-transform:rotate(2grad);
    -webkit-transform:rotate(2grad);
    -o-transform:rotate(2grad);
    -ms-transform:rotate(2grad);
    transform:rotate(2grad);
    }
    </style>
    </head>
    <body>
    <div>transform:rotate(2grad);</div>
    </body>
    </html>

    3、rad

    弧度(Radians)。一个圆共2π弧度

    90deg = 100grad = 0.25turn ≈ 1.570796326794897rad

    2.png

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <style>
    .test{
    height:100px;background:#eee;
    -moz-transform:rotate(2rad);
    -webkit-transform:rotate(2rad);
    -o-transform:rotate(2rad);
    -ms-transform:rotate(2rad);
    transform:rotate(2rad);
    }
    </style>
    </head>
    <body>
    <div>transform:rotate(2rad);</div>
    </body>
    </html>

    4、turn

    转、圈(Turns)。一个圆共1圈

    90deg = 100grad = 0.25turn ≈ 1.570796326794897rad

    1.png

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <style>
    .test{
    height:100px;background:#eee;
    -webkit-transform:rotate(.5turn);
    -o-transform:rotate(.5turn);
    -ms-transform:rotate(.5turn);
    transform:rotate(.5turn);
    }
    </style>
    </head>
    <body>
    <div>transform:rotate(.5turn);</div>
    </body>
    </html

    更多编程相关知识,请访问:编程教学!!

    以上就是css中的角度单位有哪些?的详细内容,更多请关注php中文网其它相关文章!

    本文原创发布php中文网,转载请注明出处,感谢您的尊重!
    专题推荐:css 角度单位
    上一篇:css怎样设置字体靠左显示 下一篇:css中内联元素可继承的属性有哪些?
    第14期线上培训班

    相关文章推荐

    • 如何解决myeclipse 8.5 css乱码问题• css实现文字不换行溢出显示省略号• css怎么设置全屏背景图片• css ellipsis不起作用怎么办• css怎么实现首字母下沉效果

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网