css2D、3D详解

最新推荐文章于 2024-02-01 16:56:56 发布

给予546

最新推荐文章于 2024-02-01 16:56:56 发布

阅读量534

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/weixin_69474694/article/details/125806598

版权

css2D、3D详解

摘要由CSDN通过智能技术生成

1.2D

2D坐标轴

                     （负）
                 （负）—|———————————————➡X轴（正）
                       |
                       |
                       |
                       |
                       |
                       ⬇ Y轴（正）

X轴：水平，向右为正，向左为负
Y轴：垂直，向下为正，向上为负

2D缩放

transform: scale() 缩放

- transform: scale(x,y) 沿着x轴和y轴缩放
- transform: scaleX(x) 沿着x轴缩放
- transform: scaleY(y) 沿着y轴缩放

> 取值范围0~1之间表示缩小，1表示正常大小，1以上表示放大，默认值为1
> 取值为负值表示先翻转后缩放
>
> 为一个值的时候，沿着水平方向和垂直方向等比例缩放

2D旋转

### 

* 
  transform: rotate(ndeg) 旋转
  
  * 语法
  
  * transform：rotate(deg);沿着中心点旋转，默认值
  
  * transform: rotateX(deg);沿着X轴旋转
  * transform: rotateY(deg);沿着Y轴旋转
    ju
        单位：deg
        当角度值为正数时，元素沿着顺时针方向旋转
        当角度值为负数时，元素沿着逆时针方向旋转