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

最新推荐文章于 2022-03-06 13:40:58 发布

Y-sunday-Z

最新推荐文章于 2022-03-06 13:40:58 发布

阅读量830

点赞数

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

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

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一. 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); */
    }
    </style>
</head>
<body>
    <!-- 定义一个盒子-->
    <div class="box">

    </div>
</body>
</html>

下面对位移做一下总结：

translate最多设置2个值，第一个值是水平，第二个值是垂直。
translate偏移的位置，参照的是自身原有的位置。
translate若设置负值时，会实现逆方向移动。
若设置一个值时，只有水平方向有效。
可以设置百分比，百分比参照的是自身的大小。

2、旋转

语法：transfrom:rotate(number deg);

这里就将代码简化一下了：

.box {
   width: 200px;
   height: 200px;
   background: hotpink;
   margin:100px auto;
   /* 旋转 */
   /* 顺时针旋转45度 */
   /* transform: rotate(45deg);   */
   /* 逆时针旋转45度 */
   /* transform: rotate(-45deg);  */
  }

总结一下：

单位：deg
正值：顺时针旋转
负值：逆时针旋转
旋转源点的设置：transform-origin:(水平取值：left| center| right |像素|百分比，垂直取值：top | center| bottom|像素|百分比);

3、缩放

语法：transform:scale(number,number);

代码如下：

.box {
   width: 100px;
   height: 100px;
   background:hotpink;
   margin: 200px auto;
   /* 缩放-放大2倍数 */
   transform: scale(2)
  }

关于缩放的总结：

最多设置2个值，第一个值表示缩放宽度，第二值表示高度
若设置的值大于0小于1表示缩小
若大于1表示放大多少倍
若设置一个值时，表示宽高一起缩放多少倍。

4、倾斜

语法：transform:skew(number deg，number deg);

大概的代码如下：

div {
   width: 300px;
   height: 200px;
   background: red;
   margin: 100px auto;
   transform: skew(45deg,0deg);
}

稍微总结一下：

值1表示左右倾斜
值2表示上下倾斜
单位是deg，可以是负值

希望大家都能迎娶白富美，走向人生巅峰。

Y-sunday-Z

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
一、浅谈前端的2D、3D转换，以及动画的定义和调用（关于2D的一些操作)

一. 2 D转换转换是C3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放、倾斜 1、位移语法：transfrom:translate(x,y);简单的代码实例如下：这里我们把背景色设置成了骚粉哈哈！！！<!DOCTYPE html><html lang="en"><head> <meta charset="U...
复制链接

扫一扫