translate 的50%是相对于自己的

最新推荐文章于 2025-10-07 21:43:58 发布

原创最新推荐文章于 2025-10-07 21:43:58 发布 · 2.7k 阅读

1 ·

CC 4.0 BY-SA版权

CSS3 专栏收录该内容

12 篇文章

订阅专栏

本文详细解释了CSS中transform属性的translate使用方法，特别是当使用百分比时如何根据父元素的高度进行定位。通过一个简单的例子展示了当鼠标悬停在div元素上时，该元素会根据自身的宽度移动50%，并设置了2秒的过渡效果。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*translate  的50%是相对于自己的
        子元素的百分比高度是根据父元素的高度来确定的，
        所以只要设置了父元素的高度，子元素的高度百分比才会有用。

        但是(之前没想那么多)
       transform:translate(100%)  是根据自己走的
        */
        div{
            width: 300px;
            height: 300px;
            background-color: grey;
        }
        div:hover{
            transform: translateX(50%);
            transition: all 2s;
        }
    </style>
</head>
<body>
<div></div>

</body>