HiDocs
Search K

Appearance

转换Transform ​

CSS3中的转换允许我们对元素进行==旋转、缩放、移动或倾斜==。它为分2D转换 或 3D 转换。

在css2时代，如果要做一些图片转换角度，都依赖于图片、Flash或JavaScript才能完成。但是==现在借助CSS3就可以轻松倾斜、缩放、移动以及翻转元素==。通过CSS变形，可以让元素生成静态视觉效果，但也可以很容易结合

CSS3的transition和动画的keyframe产生一些动画效果。

一、转换Transform 2D的属性 ​

通常的属性包含了属性名和属性值，而CSS3的transform属性是用函数来定义的。Transform 2D函数包括了

translate()、scale()、rotate()和skew()。

书写格式:

transform:函数名(x轴值，y轴值);

转换的效果：

image-20220407225321807

1.translate()移动 ​

translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。接受CSS的标准度量单位（px）

translate(x,y)：转换，沿着X和Y轴移动元素。

如果使用的参数为百分比，那么这个百分比是相对于自身的大小的

鼠标放上去移动元素：

css
#box1{
    width:200px;
    height:200px;
    margin:100px;
    border:1px solid blue;
}
#box1:hover{
    /*margin-top:105px 这样也可以实现一个单向移动的效果*/
    /*水平和垂直方向移动函数：translate  一个参数，代表水平移动*/
    /*transform: translate(-30px); !*向左移动30px*!*/
    /*两个参数，代表斜着移动*/
    transform:translate(30px,50px); /*向右30，向下50*/
}

向上移动并出现阴影：

css
#box2{
    width:200px;
    height:500px;
    background: #fff;
    border:1px solid #ccc;
    margin: 100px auto;
}
#box2:hover{
    transform: translate(0px,-10px);
    box-shadow:0px 0px 5px 5px #f4f4f4;

}

2.rotate()旋转 ​

通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。它以deg为单位，代表了旋转

的角度。正为顺时针，负为逆时针。

css
#box2:hover{
    /*旋转*/
    /*    支持一个参数，指旋转角度 单位 deg*/
    transform:rotate(20deg);
}

3.scale()放缩 ​

通过值把宽和高转换为原始尺寸的n倍，接受两个参数，前面的为宽，后面的为高。（实现放大效果）

可取值：默认值为1

缩小：0-1之间的数

放大：大于1的数

css
#box2:hover{
    /*缩放*/
    /*
        支持两个参数，代表水平方向和垂直方向的缩放
        也支持一个参数，水平和垂直等于一个值
    */
    transform:scale(0.5,1.2); /*变窄、变长*/
    /*transform:scale(1.2);*/
}

4.skew()翻转 ​

根据水平轴和垂直轴翻转，接受两个或一个值，两个值时前面为水平，后面为垂直的角度 ，一个值只是水平轴

的角度。此函数是指元素的倾斜角度。

有一个类似立体的效果

css
#box4:hover{
    /*倾斜*/
    transform:skew(40deg,30deg);
}

2D的实例：

注：p标签与span标签区别只在于display，一个是block，一个是inline.，一个换行、一个不换行

css
#box3{
    width:650px;
    height:112px;
    border:1px solid #ccc;
    background: url("./img/javajb.png") no-repeat;
    margin: 100px auto;
    transition:all 1s; /*这个属性可以实现平滑放大的效果*/
}
#box3>div{
    /*border:1px solid red;*/
    float:left;
    margin-left: 25px;
    margin-top: 10px;
}
#box3:hover{
    transform: scale(1.2);
}

二、转换Transform 3D的属性 ​

1.Transform 3D常用函数 ​

image-20220407225414096

2.使元素延Z轴移动 ​

要在父类元素中加：perspective 透视的深度(呈现出是伪3D效果)，才会显示出移动的效果，因为要透视过去才能看到，不然是被盖住的

perspective: 400px;

css
#parent{
    width: 200px;
    height: 200px;
    background: pink;
    margin:100px auto;
    /*perspective 透视的深度(呈现出是伪3D效果)*/
    perspective: 400px;

}

#son{
    width:100%;
    height:100%;
    background: blue;
    /*Z轴移动*/
    transform: translateZ(-100px);
    /*transform:translate3d(-10px,-10px,-100px);*/
}

3.使元素呈现由内及外的放大效果 ​

注： perspective属性也可以写在本元素中的transform后面，perspective(400px)

css
#son{
    width:100%;
    height:100%;
    background: blue;
    /*Z轴移动*/
    transform: translateZ(-100px);
    /*transform:translate3d(-10px,-10px,-100px);*/
    transition: all 3s; /*延缓时间，圆滑的效果*/
}
#son:hover{
    transform: perspective(400px) scaleZ(1);
}

4.使元素呈现旋转的效果 ​

注： perspective属性也可以写在body中

deg是旋转的角度

css
body{
    perspective: 400px;
}
img{
    transition: all 3s;
}
img:hover{
    transform: rotateX(180deg);
    /*transform: rotateZ(180deg);*/
}

案例：伪类+transform+transition 实现导航栏下划线从中间放缩的效果

html
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css导航下划线动画效果</title>
</head>
<style>
    .items {
        display: flex
    }
 
    .item {
        width: 100px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        background-color: black;
        color: white;
        position: relative;
    }
 
    .item:before { /*由于有绝对定位，所以before和after效果一样！*/
        content: '';
        height: 4px;
        background-color: #BADFED;
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
        transform: scaleX(0);
        transition: .3s;
    }
 
    .item:hover:before { /*注：hover:before中间不能有空格*/
        transform: scaleX(1);
    }
</style>
 
<body>
    <div class="items">
        <div class="item">因为</div>
        <div class="item">所以</div>
        <div class="item">无所谓</div>
    </div>
</body>
 
</html>