CSS新特性之2D转换transform

标签：相对   position   垂直   relative   type   ota   top   宽度   最大   

transform是css3中具有颠覆性特征之一，可以实现元素的位移、旋转、缩放等效果

1.位移translate

1.1语法

transform: translate(x,y);//x,y分别表示x轴和y轴上移动的距离
transform: translateX(n);//x轴上移动的位置
transform: translateY(n);//y轴上移动的位置

1.2举例子

<style type="text/css">
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
        /*transform: translate(100px,100px);*/

        /*仅水平方向移动100px*/
        /*transform: translateX(100px);*/
        /*transform: translate(100px,0);但是y方向的0不可以省略*/

        /*仅垂直方向移动100px*/
        transform: translateY(100px);
        /*transform: translate(0,100px);仅垂直方向移动100px但是x方向的0不可以省略*/
    }
</style>

之前学过几种移动盒子的位置的方法：定位、盒子外边距。
现在又有一种新的方法就是translate,translate最大的优点就是不会影响到其他元素的位置。

1.3盒子水平垂直居中对齐

translate()、translateX()、translateY()中的单位除了是像素以外还可以是百分比
translate中的百分比单位是相对于自身元素的宽和高translate:(50%,50%)，利用该方法可以实现盒子水平垂直居中对齐。
(1)结构

<div>
    <p></p>
</div>

(2)样式

div {
    position: relative;
    height: 500px;
    width: 500px;
    background-color: pink;
}
p {
    position: absolute;
    top: 50%;
    left: 50%;
    /*1.以前的写法*/
    /*margin-top: -100px;
    margin-left: -100px;    100px就是p盒子宽高(200px)的一半*/

    /*2.现在的写法*/
    transform: translate(-50%,-50%);/*向X轴、Y轴负方向走自身宽度的一半*/

    width: 200px;
    height: 200px;
    background-color: purple;
}

1.4 translate对行内标签没有影响

结构

<span>123</span>

样式

span {
    transform: translate(300px,300px);
}

结果会发现123是不会动的

2.旋转rotate

3.缩放scale

CSS新特性之2D转换transform

标签：相对   position   垂直   relative   type   ota   top   宽度   最大   

原文地址：https://www.cnblogs.com/deer-cen/p/11972139.html