变换，动画

news2025/6/18 14:39:51

面试题——需求：在不知道父元素与子元素的宽高时
如何让子元素在父元素内居中？
1.定位父相子绝
2.子元素 top：50% left:50%
3.子元素 transform: translate(-50%,-50%)

        .parent{
            height: 500px;
            background-color: red;
            position: relative;
        }
        .child{
            width: 200px;
            height: 200px;
            background-color: yellow;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }

<div class="parent">
    <div class="child"></div>
</div>

在这里插入图片描述

旋转变换（需要设置旋转的角度）

旋转有3个方向
延x轴transform:rotateX(30deg) 延x轴旋转30度
延y轴transform:rotateY(30deg) 延y轴旋转30度
延z轴transform:rotateZ(30deg) 延z轴旋转30度
transform:rotate(30deg)延z轴旋转30度

修改旋转的基准点

transform-origin:
默认值：center 元素的正中心
可选值：top left (0 0) 元素左上角
top center (50% 0) 上边线中点
top right (100% 0) 右上角
bottom left (0 100%) 左下角
bottom center (0 100%) 下边线中点
bottom right (0 100%) 右下角

放大与缩小

transform:scaleX(2) 宽度乘以2
scaleY(0.6) 高度乘以0.6
scale（1.5）宽高都乘以1.5 最常见
特殊的：scaleX(-2) 先延X轴翻转，然后宽度乘以2
scaleY（-0.6）先延Y轴翻转，然后高度乘以0.6
scale（-1.5）沿X轴和Y轴都翻转，然后宽高都乘以1.5

动画

设置关键帧

        @keyframes changeBgcolor {
            0%{
                background-color: red;
            }
            100%{
                background-color: yellow;
            }
        }

        div{
            background-color: red;
            width: 100px;
            height: 100px;
            animation: changeBgcolor 10s;
        }

@keyframes 关键字
changeBgcolor 给动画关键帧取名字
关键帧内必须设置
0% 初始样式
100% 结束样式
在元素的样式中使用动画关键帧可以让这个元素从0%的样式变化到100%的样式，形成动画
此例中，div使用了动画关键帧changeBgcolor，所以div的样式会从红色背景变化到绿色背景。