web前端的特效平面转换transfrom_网站建设

web前端的特效平面转换transfrom

平面转换 transform

作用：为元素 添加动态效果，一般与过渡配合使用概念：改变盒子在平面内的形态（位移、旋转、缩放、倾斜）

平面转换又叫 2D 转换

1、平面转换----平移

目标：使用 translate实现元素位移效果语法

transform: translate(水平移动距离, 垂直移动距离);

取值（正负均可）：

　　1.像素单位数值

　　2.百分比（参照物为盒子自身尺寸）

注意：X轴正向为右，Y轴正向为下

技巧：

　　1.translate()如果只给出一个值, 表示x轴方向移动距离

　　2.单独设置某个方向的移动距离：translateX() & translateY()

总结：

给盒子添加向左、向上的位移效果，属性取值为正还是负？负
translate() 只写一个值表示哪个方向移动？水平（X 轴）
百分比取值参

1）平面实现居中效果

将块放置页面中央

核心代码：

原理：位移取值为百分比数值，参照盒子自身尺寸计算移动距离案例：双开门效果原理：位移取值为百分比数值，参照盒子自身尺寸计算移动距离

代码示例：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>.box{
            width: 1366px;
            height: 600px;/* */position: relative;
            margin: 100px auto;
            background-image: url(./bg.jpg);        }
        .left{
            background-image: url(./fm.jpg);
            width:50% ;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            transition: all 1s;
        }
        .right{
            width: 50%;
            height: 100%;
            background-image: url(./fm.jpg);
            background-position: right;
            position: absolute;
            top: 0;
            right:0;
            transition: all 1s;
        }
        .box:hover .left{
            transform: translateX(-100%);
        }
        .box:hover .right{
            transform: translateX(100%);
        }</style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

结果：

鼠标移入

2、平面转换-----旋转

目标：使用 rotate实现元素旋转效果语法：

　　transform: rotate(角度);

　　注意：角度单位是deg

技巧：取值正负均可

　　取值为正, 则顺时针旋转

　　取值为负, 则逆时针旋转素旋转效果

代码示例：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>.box{
            width: 500px;
            height: 500px;
            border: 1px solid red;
            margin: 100px auto;
            position: relative;
        }
        img{
            position: absolute;
            width: 100%;
            height: 100%;
            transition: all 2s;
        }
        .box:hover img{
            transform:  rotate(360deg);
        }</style>
</head>
<body>
    <div class="box"><img src="./rotate.png" alt=""></div>
</body>
</html>