CSS动态效果之平面转换（2D转换）

VIP文章一直学习的程序员L

已于 2023-07-12 22:01:34 修改

阅读量253

点赞数

文章标签： css 平面前端

于 2023-07-12 13:11:15 首次发布

本文链接：https://blog.csdn.net/weixin_45604020/article/details/131668572

版权

平面转换（2D转换）

一、平面转换——平移
- 1.1 利用平移实现定位
- 1.2 平移转换案例——双开门
二、平面转换——旋转
- 2.1 改变旋转原点
- 2.2 平移旋转合并
三、平面转换——缩放
- 3.1 缩放案例——播放按钮
四、平面转换——倾斜

很多时候为了让页面效果更丰富，会选择添加以下动态效果例如平面转换。

属性名： 平面转换（2D转换）——transform
作用： 改变盒子在平面内的形态（位移、旋转、缩放、倾斜）为CSS添加动态效果，一般与过渡配合使用。

一、平面转换——平移

属性： transform：translate（x轴移动距离，y轴移动距离);
取值：可以取正取负
- 像素值
- 百分比（参照盒子自身尺寸计算结果）
注意：
- 可以只取一个值，表示向左移动；
- 可以单独设置X或Y轴的移动距离：translateX()或translateY()。

在这里插入图片描述

 <style>
      .box1{
     
        margin: 100px auto;
        width: 800px;
        height: 500px;
        border: 1px solid red;
      }
      .box2{
     
        width: 400px;
        height: 200px;
        background-color: rgba(86, 216, 248, 0.78);
        transition: all 1s;
      }
      .box1:hover .box2{
     
        transform: translate(300px ,200px);
        /*百分比：参照盒子的尺寸。200的50%是150,200的100%是200*/
        transform: translate(50% ,100%);
        /*可以取正负值*/
        transform: translate(-50% ,100%);
        /*只写一个值默认沿x轴移动*/
        transform: translate(100px);
        /*单独设置x轴移动距离*/
        transform: translateX(100px);
        /*单独设置y轴移动距离*/
        transform: translateY(100px);
      }
    </style>
<body>
  <div class="box1">
    <div class="box2"></div>
  </div>
</body>