设置旋转中心点案例

最新推荐文章于 2024-05-18 15:53:23 发布

fengjiao__66666

最新推荐文章于 2024-05-18 15:53:23 发布

阅读量257

点赞数

分类专栏： HTML作业文章标签： html

本文链接：https://blog.csdn.net/fengjiao__66666/article/details/124935698

版权

本文通过实例讲解如何在HTML中设置元素旋转的中心点，深入理解CSS transform属性，包括使用transform-origin调整旋转参照点，实现元素的精准动态效果。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设置旋转中心点</title>
    <style>
        div{
            /* 溢出隐藏 */
        overflow: hidden;
        width:200px;
        height: 200px;
        border:1px solid aqua;
        margin:10px ;
        float:left;
        }
        div::before{
            content:"远方";
            display:block;
            width: 100%;
            height:100%;
            background-color: aqua;
            transform: rotate(180deg);
            transform-origin: left bottom;
            /* 过渡效果 */
            transition: all .5s;
        }
        div:hover::before{
            transform: rotate(0deg);
        }
    </st