【CSS基础】9.形变transform

最新推荐文章于 2024-04-26 16:58:59 发布

春风十里不如你I

最新推荐文章于 2024-04-26 16:58:59 发布

阅读量287

点赞数 3

分类专栏： CSS基础文章标签： css transform 形变 trnaslate scale rotate

本文链接：https://blog.csdn.net/kakaai77/article/details/137723341

版权

CSS基础专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1. transform介绍

CSS transform属性允许对某个一个元素进行形变，包括旋转、位移、缩放、倾斜等
并非所有的盒子都可以形变（通常来说行内级盒子不能进行形变）

2. transform的用法

在这里插入图片描述

transform可以增加多个transform function，通过空格隔开

2.1 位移 translate(x,y)

平移：transform:translate(x,y)
- 可以移动元素在平面的位置，其中x表示x轴移动的举例
- y轴相同
- 当只写一个值时，设置为x轴的距离
- 2个值时，为x轴和y轴的移动距离
- 数字：100px，移动100个像素的距离
- 百分比：50%,参考对象是元素本身

需要区分定位中的的百分比，如给top设置百分比时，参考的是父盒子的高度

translateX和trnaslateY是对translate的补充函数

利用translate和定位可以使一个盒子水平垂直居中

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        width: 300px;
        height: 300px;
        background-color: pink;
      }
      .container .box {
        width: 100px;
        height: 100px;
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: purple;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box"></div>
    </div>
  </body>
</html>

在这里插入图片描述

2.2 缩放 scale(x,y)

缩放： scale(x,y)
- 可以改变元素的大小
- 一个值为x轴的缩放
- 二个值为x轴和y轴的缩放
- 数字：1表示不变，0.5表示缩小一班，2表示放大一倍
- 百分比，不常用，也可以设置
scaleX和scaleY是对scale补充

2.3 旋转 rotate(角度)

旋转：rotate
- 一个值，表示旋转的角度
- 常用单位为deg表示角度，一个圆为360deg
- 正数为顺时针旋转
- 负数为逆时针旋转
- 也可以使用其他单位
90deg = 100grad = 0.25turn = 1.5708rad

2.4 倾斜 slew(x,y)

倾斜 skew(x,y)
- 定义一个元素在二维平面的倾斜转化
- 一个值表示x轴的倾斜
- 二个值表示y轴的倾斜
- deg：倾斜的角度
- 正数为逆时针
- 负数为顺时针

3. transform-origin 设置形变的原点

3.1 介绍

transform-origin:形变的原点
- 在缩放scale和rotate的过程中，需要参照原点来进行形变
- transform-origin是一个CSS属性，并不是trnasfrom的一个函数
- 一个值为x轴的原点默认为center
- 二个值为x轴和y轴的原点，默认center
值类型：,,关键字top left bottom right center
length:50px 从左上角开始计算
百分比：参考对象为自身

春风十里不如你I

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
【CSS基础】9.形变transform

CSS transform属性允许对某个一个元素进行形变，包括旋转、位移、缩放、倾斜等并非所有的盒子都可以形变（通常来说行内级盒子不能进行形变）transform-origin:形变的原点在缩放scale和rotate的过程中，需要参照原点来进行形变transform-origin是一个CSS属性，并不是trnasfrom的一个函数一个值为x轴的原点默认为center二个值为x轴和y轴的原点，默认center。
复制链接

扫一扫