translate 的50%是相对于自己的

jasonjkj

于 2017-09-19 19:42:32 发布

阅读量2.6k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： CSS3

本文链接：https://blog.youkuaiyun.com/jasonjkj/article/details/78033757

CSS3 专栏收录该内容

12 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>