• 技术文章 >Web开发 >css教程

    css旋转属性如何理解

    小妮浅浅小妮浅浅2021-07-09 10:14:09原创669

    1、css旋转属性为transform。

    transform属性说明

    2、transform属性将2D或3D转换为元素。这个特性允许我们旋转,缩放,移动或者倾斜元素。

    transform属性旋转属性值:

    rotate(angle) 定义 2D 旋转,在参数中规定角度。

    rotate3d(x,y,z,angle) 定义 3D 旋转。

    rotateX(angle) 定义沿着 X 轴的 3D 旋转。

    rotateY(angle) 定义沿着 Y 轴的 3D 旋转。

    rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。

    实例

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>DIV旋转属性的演示</title>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
    <style type="text/css">
    body {
    font-family: "Arial", sans-serif;
    }
    #example {
    position: absolute;
    border: #09F solid 1px;
    font-weight: 900;
    padding: 10px;
    display: block;
    width: 500px;
    height: 400px;
    margin-top: -1px;
    margin-left: -1px;
    transform: rotate(40deg);
    -o-transform: rotate(40deg);
    -webkit-transform: rotate(40deg);
    -moz-transform: rotate(40deg);
    filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1.2660444431189777, M12=-0.3327876096865394, M21=0.1127876096865398, M22=0.9660444431189779);
    }
    </style>
    <!--[if IE]>
    <style type="text/css">
    #example {
    top: 50px;
    left: 50px;
    }
    </style>
    <![endif]-->
    </head>
    <body>
    <div id="example"> 旋转成功</div>
    </body>
    </html>

    以上就是css旋转属性的介绍,希望对大家有所帮助。更多编程基础知识学习:python学习网

    本文教程操作环境:windows7系统、css3版,DELL G3电脑。

    专题推荐:css旋转属性
    品易云
    上一篇:没有了 下一篇:css设置文字居中的两种方法

    相关文章推荐

    • python中css如何定位?• html转jsp之后css样式出不来• jQuery中css(properties)如何使用?

    全部评论我要评论

    © 2021 Python学习网 苏ICP备2021003149号-1

  • 取消发布评论
  • 

    Python学习网