一、浅谈前端的2D、3D转换，以及动画的定义和调用（关于2D的一些操作)

最新推荐文章于 2024-04-02 21:26:16 发布

Y-sunday-Z

最新推荐文章于 2024-04-02 21:26:16 发布

阅读量861

点赞数

分类专栏：前端文章标签：前端 2D 3D 动画

本文链接：https://blog.csdn.net/qq_41710719/article/details/88798697

版权

一. 2 D转换

转换是C3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放、倾斜

1、位移

语法：transfrom:translate(x,y);

简单的代码实例如下：这里我们把背景色设置成了骚粉哈哈！！！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      /* 通过style来设置盒子的CSS样式 */
    .box{
        width: 200px;
        height: 200px;
        background: hotpink;
        /* 此行代码就是让盒子发生位移的 */
        transform: translate(50px,50px);
        /* 负值也是可以的 */
        /* transform: translate(-50px,-50px); */
    }
    </st