css3-2D-transform之translate平移

来源：互联网发布：linux怎么关机编辑：程序博客网时间：2024/06/08 14:35

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平移之后不会将标准流中的元素挤开。其他取值可以一一进行尝试。

0 0