CSS3 transform、translate 2D 转换的使用-蒲公英云

CSS3 transform、translate 2D 转换的使用

transform 属性用于设置元素的 2D 或 3D 转换；通过这个属性可以对元素进行旋转，缩放，移动，倾斜等操作

2D 转换中的移动是 2D 转换中的一种功能，可用来改变元素在页面中的位置，与定位很类似

属性值	描述
none	不进行转换
translate(x, y)	设置为 2D 转换
translateX(x)	只设置 x 轴的转换
translateY(y)	只设置 y 轴的转换

示例：

* { 
    padding: 0;
    margin: 0;
}
/*清除浮动*/
.clearfix:before, .clearfix:after{ 
    content: "";
    display: table;
}
.clearfix:after{ 
    clear: both;
}
.clearfix{ 
    *zoom: 1;
}
/* 设置 ul */
ul { 
    width: 624px;
    margin: 5px 0 0 10px;
    padding: 10px;
    padding-bottom: 0;
    border: 1px solid gray;
}
/* 设置 li */
ul li { 
    float: left;
    list-style: none;
    border: 1px solid #000;
    margin-bottom: 20px;
}
ul li:nth-child(2n-1){ 
    margin-right: 20px;    
}
/* 设置 p 标签 */
ul li>p { 
    width: 300px;
    height: 100px;
    background-color: #ccc;
}
ul li .translate { 
    transform: translate(-10px, 10px);
}
ul li .translate2 { 
    transform: translate(50%, 50%);
}
ul li .translate3 { 
    transform: translate(10px, 0);
}
ul li .translateX { 
    transform: translateX(10px);
}
ul li .translateY { 
    transform: translateY(-10px);
}
<ul class="clearfix">
    <li>
        <p class="translate">transform: translate(-10px, 10px);</p>
    </li>
    <li>
        <p class="translate2">transform: translate(50%, 50%);</p>
    </li>
    <li>
        <p class="translate3">transform: translate(10px, 0);</p>
    </li>
    <li>
        <p class="translateX">transform: translateX(10px);</p>
    </li>
    <li>
        <p class="translateY">transform: translateY(-10px);</p>
    </li>
</ul>