css3-2D-transform之translate平移

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq545698514/article/details/53607275

  translate平移应该也算是transform中用的比较多的属性之一了,用法:transform:translate(x轴平移,y轴平移),也可以单独设置:transform:translateX(),transform:translateY()。如果只设置transform:translate(值),那么只会在X轴进行平移。后期在transform-3D还会有transform:translateZ(),这个值在做6面体的时候非常好用,以后再谈。

  代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hover宽度增长</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            width: 100px;
            height: 50px;
            background-color: #f00;
            transform:translate(50px,40px)
        }
        div{
            width: 200px;
            height:300px;
        }
        p{
            height: 50px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div></div>
    <p></p>
</body>
</html>

 效果图:

 

注意:translate平移之后不会将标准流中的元素挤开。其他取值可以一一进行尝试。

展开阅读全文

没有更多推荐了,返回首页