CSS3中的转换transform，2D和动画

最新推荐文章于 2025-05-31 15:33:24 发布

sustyle

最新推荐文章于 2025-05-31 15:33:24 发布

阅读量275

点赞数

分类专栏： web前端学习文章标签： css css3 前端

本文链接：https://blog.youkuaiyun.com/sunchanglan151/article/details/121464507

版权

web前端学习专栏收录该内容

20 篇文章

订阅专栏

转换transform：可实现元素的位移、旋转和缩放等效果。变形,对行内标签没有效果。

移动：translate,即改变元素的位置，类似定位。

移动盒子的位置：定位、盒子的外边距、2d转换移动。

语法：最大的优点是不会影响其他元素的位置

  /* x就是x轴的移动位置，y就是y轴的移动位置 中间用逗号隔开 */
            transform: translate(x,y);
            transform: translate(100px,100px);
            /* 如果只移动x轴的坐标 */
            transform: translate(100px,0);
            transform: translateX(100px);
            /* 如果只移动y坐标 */
            transform: translate(0,100px);
            transform: translateY(100px);
            /* 如果里面的参数是%移动的距离是盒子自身的宽度或者高度来对比的 */
            /* 这里的50%就是50px,因为盒子的宽度的100px */
            transform:translateX(50%)

      p{
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 200px;
            background-color: purple;
            /* margin-top: -100px;
            margin-right: -100px; */
            transform: translate(-50%,-50%);
        }

transform: translate(-50%,-50%);可以实现垂直居中的功能。

旋转：rotate

<style>
        img{
            width: 150px;
            transform: rotate(45deg);
            border-radius: 50%;
            border:5px solid pink;
            /* 过渡写到本身上，谁做动画给谁加 */
            transition: all 1s;
        }
        img:hover{
 /* 正值就是顺时针，负值就是逆时针 */
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <img src="../img/tb.jpg" alt="">
</body>

旋转中心点的设置：

<style>
        div{
            width: 300px;
            height: 300px;
            background-color: pink;
            margin: 100px auto;
            transition: all 1s;
            /* 1.可以跟方位名词 */
            /* transform-origin:left bottom;*/
            /* 2.默认的是50% 50%等价于center center */
            /* 3. 可以是px像素 */
            transform-origin: 50px 50px;
        }
        div:hover{
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <div>

    </div>
</body>

缩放：scale

<style>
        div{
            width: 300px;
            height: 300px;
            background-color: pink;
            margin: 100px auto;
        }
        div:hover{
            /* 1.里面写的数字不是单位，就是倍数的意思，1就是1倍，2就是2倍 */
            /* transform: scale(x,y); */
            transform: scale(2,2);
            /* 2.修改了宽度为原来的2倍，高度不变 */
            transform: scale(2,1);
            /* 3.等比例缩放 同时修改宽度和高度 ，我们有简单的写法 以下是 宽度修改了2倍， 高度默认和第一个参数一样 */
            transform: scale(2);
            /* 4.我们可以进行缩小，小于1 就是缩放的意思 */
            transform: scale(0.5,0.5);
            transform: scale(0.5);    
            /* 5.scale的优势是什么？:不会影响其他的盒子，而且可以设置缩放的中心点 */
            /* transform: scale(2); */
        }
    </style>
</head>
<body>
    <div></div>
</body>

2D转换的综合写法：transform:translate() rotate() scale()...等，同时具有位移和其他属性的时候，记得将位移放到最前面。

动画（animation）:可以通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

动画比过渡更强大。

制作动画分2步：

先定义动画：利用keyframes定义动画（类似定义类选择器）
再使用（调用）动画。

动画的简写：动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束的状态。前两个属性一定要写。

多个动画使用的时候：在一个animation里面，以逗号隔开。

可以做多个状态的变化。里面的百分比要为整数，里面的百分比就是总的时间都划分。

@keyframes 动画名称{

    0%{
            width:100%
     }
    100%{
            width:200%
     }
}

from to 等价于0%和100%

<style>
        /* 想要一个页面，一个盒子就从左边走到右边 */
        /*定义动画 */
        @keyframes move{
            /* 开始状态 */
            0%{
                transform: translateX(0px);
            }
            /* 结束状态 */
            100%{
                transform: translateX(1000px);
            }
        }

        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 调用动画 */
            /* 动画名称 */
            animation-name: move;
            /* 动画完成一个周期持续的时间 */
            animation-duration: 2s;
        }
    </style>
</head>
<body>
    <div></div>
</body>