transform控制元素移动

最新推荐文章于 2021-12-14 18:08:35 发布

gunsmoke

最新推荐文章于 2021-12-14 18:08:35 发布

阅读量758

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/gunsmoke/article/details/104537364

版权

CSS 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

	div {
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
        }
        div:hover {
            transform: translateX(200%);
            transition: 1s;
        }

transform: translateX(200%);这就是控制元素移动的样式，translateX表示水平方向移动，右边是正半轴，对应y轴方向的移动使用translateY，向下方向是y轴正半轴，参数200%表示移动自身大小的2倍，当然也可以自己写别的大小，transition控制移动的时间，如果不设置会很突兀。