transition和transform

2024-01-07 16:47:28

transition-property属性指定CSS属性的nametransition效果（transition效果时将会启动指定的CSS属性的变化），默认是all，width和height也可以。
提示:一个转场效果，通常会出现在当用户将鼠标悬停在一个元素上时。
transition-duration 属性规定完成过渡效果需要花费的时间（以秒或毫秒计），默认是0.
transition-delay 属性规定过渡效果何时开始（延迟过渡），值以秒或毫秒计，默认为0
ransition-timing-function属性指定切换效果的速度。此属性允许一个过渡效果，以改变其持续时间的速度。默认值：ease

<!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>Document</title>
    <style>
        div{width: 100px;height: 100px;background: red;transition-property: all/* 过渡属性 */;transition-duration: 1s;/* 过渡时间 */transition-delay: 2s;/* 延迟过渡 */transition-timing-function: ease;/* 规定速度效果的速度曲线 */}
        div:hover{width: 200px;height: 200px;background: blue;}
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果开始

鼠标移入时

transform位移与缩放
translate位移有translateX、translateY（通常是前面两个）、translateZ（3d）

translate(100px,100px) ;

<!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>Document</title>
    <style>
        .box1{width: 300px;height: 300px;border: 1px black solid;margin: 30px auto;}
        .box2{width: 100px;height: 100px;background: red;transition: 2s;}
        .box1:hover .box2{ transform: translate(100px,100px) 
                          /* transform: translateX(100px); */
                          }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>>
    </div>
</body>
</html>

开始前

scale缩放
值是一个比例值，正常大小是1，会已当前元素中心点进行缩放
scaleX、scaleY（通常是前面两个）、scaleZ（3d）
scale（2,2）=scale（2）
前面一个是宽，后面一个是高

 transform: scale(2);

<!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>Document</title>
    <style>
        .box1{width: 300px;height: 300px;border: 1px black solid;margin: 30px auto;}
        .box2{width: 100px;height: 100px;background: red;transition: 2s;}
        .box1:hover .box2{/* transform: translate(100px,100px) */
                          /* transform: translateX(100px); */
                          transform: scale(2);}
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>>
    </div>
</body>
</html>

rotate旋转
单位是角度deg
正值顺时针，负值逆时针
rotateX（3d）、rotateY（3d）、rotateZ（2d）常用

 transform: rotateZ(-45deg);

<!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>Document</title>
    <style>
        .box1{width: 300px;height: 300px;border: 1px black solid;margin: 30px auto;}
        .box2{width: 100px;height: 100px;background: red;transition: 2s;}
        .box1:hover .box2{/* transform: translate(100px,100px) */
                          /* transform: translateX(100px); */
                          /* transform: scale(2); */
                          transform: rotateZ(-45deg);
                          }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>>
    </div>
</body>
</html>

skew斜切
单位也是角度，正值向左倾斜，负值向右倾斜
skewX、skewY

 transform: skew(-30deg,-30deg);

<!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>Document</title>
    <style>
        .box1{width: 300px;height: 300px;border: 1px black solid;margin: 30px auto;}
        .box2{width: 100px;height: 100px;background: red;transition: 2s;}
        .box1:hover .box2{/* transform: translate(100px,100px) */
                          /* transform: translateX(100px); */
                          /* transform: scale(2); */
                          /* transform: rotateZ(-45deg); */
                          transform: skew(-30deg,-30deg);
                          }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>>
    </div>
</body>
</html>

transform的注意事项
1、变形操作不会影响到其他元素
2、变形操作只能添加给块元素，但是不能添加给内联元素
3、复合写法，可以添加多个变形的操作，执行是有顺序的，先执行后面的操作，在执行前面的操作，translate会受到rotate、scale、skew的影响

.box2{width: 100px;height: 100px;background: red;transform: translate(100px,0) scale(.5);}
        /* 先进行缩放 0.5，在位移100px */
        .box3{width: 100px;height: 100px;background: red;transform: scale(.5) translate(100px,0);}
        /* 受影响，先移动50px，在缩放0.5 ，如果前面是旋转角度，则先旋转设置的度数*/

transform-origin:基点的位置
transform-Origin属性允许您更改转换元素的位置。2D转换元素可以改变元素的X和Y轴。 3D转换元素，还可以更改元素的Z轴。

transform-origin: x-axis y-axis z-axis;

也可以用数值

transform-origin:100px 100px;

综合代码

<!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>Document</title>
    <style>
        .box1{width: 100px;height: 100px;background-color: red;}
        .box2{width: 100px;height: 100px;background: red;transform: translate(100px,0) scale(.5);}
        /* 先进行缩放 0.5，在位移100px */
        .box3{width: 100px;height: 100px;background: red;transform: scale(.5) translate(100px,0);}
        /* 受影响，先移动50px，在缩放0.5 ，如果前面是旋转角度，则先旋转设置的度数*/
        .box4{width: 100px;height: 100px;background: red;transition: 1s;transform-origin: center center;}
        .box4:hover{transform: rotate(180deg);}
    </style>
</head>
<body>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
    <div class="box4">4</div>
</body>
</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>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        ul{list-style: none;}
        ul{width: 435px;margin: 30px auto;overflow: hidden;}
        ul li{float: left;width: 100px;height: 30px;background: red;color: white;line-height: 30px;text-align: center;margin: 0 5px;transform: skewX(-30deg);cursor: pointer;}
        ul li.active{background: blue;}
        ui li span{transform: skewX(30deg);display: block;}
        ul li:first-child{padding-left: 10px;margin-left: -10px;}
        ui li:last-child{padding-right: 20px;margin-right: -20px;}
    </style>
</head>
<body>
    <div>
        <ul>
            <li class="active"><span>首页</span></li>
            <li><span>关于我们</span></li>
            <li><span>联系方式</span></li>
            <li><span>招聘信息</span></li>
        </ul>
    </div>
</body>
</html>

码农公寓

相关文章