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

    css3动画怎么设置旋转参考点

    长期闲置长期闲置2022-06-14 15:56:30原创152

    在css3中,可以利用“transform-origin”属性设置元素的旋转参考点,该属性用于更改元素旋转的位置,如果是2D旋转元素可以改变元素在x和y轴的位置,如果是3D旋转元素则可以改变元素在x轴、y轴以及z轴的位置,语法为“transform-origin:X轴方向位置 Y轴方向位置 Z轴方向位置;”。

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

    css3动画怎么设置旋转参考点

    用transform-Origin属性设置旋转参考点

    transform-Origin属性允许您更改转换元素的位置。

    2D转换元素可以改变元素的X和Y轴。 3D转换元素,还可以更改元素的Z轴。

    使用此属性必须先使用 transform 属性。

    语法为:

    transform-origin: x-axis y-axis z-axis;

    x-axis

    定义视图被置于 X 轴的何处。

    y-axis

    定义视图被置于 Y 轴的何处。

    z-axis

    定义视图被置于 Z 轴的何处。

    示例如下:

    <style>
    #div1
    {
    position: relative;
    height: 200px;
    width: 200px;
    margin: 100px;
    padding:10px;
    border: 1px solid black;
    }
    #div2
    {
    padding:50px;
    position: absolute;
    border: 1px solid black;
    background-color: red;
    transform: rotate(45deg);
    transform-origin:50% 50%;
    -ms-transform: rotate(45deg); /* IE 9 */
    -ms-transform-origin:50% 50%; /* IE 9 */
    -webkit-transform: rotate(45deg); /* Safari and Chrome */
    -webkit-transform-origin:50% 50%; /* Safari and Chrome */
    }
    </style>
    </head>
    <body>
    <div id="div1">
      <div id="div2">HELLO</div>
    </div>
    </body>

    输出结果:

    31.png

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

    以上就是css3动画怎么设置旋转参考点的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css
    上一篇:css3怎么禁止表格选择高亮 下一篇:css3怎么设置鼠标滑过旋转放大
    20期PHP线上班

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• 在css3中可以实现缩放效果的属性是什么• css3中rotate3d方法怎么用• 一文了解CSS3中的新属性object-view-box• css3动画有执行顺序吗• css3边框怎么取消阴影
    1/1

    PHP中文网