css3 2D转换

HGYYR

已于 2023-04-05 15:10:44 修改

阅读量127

点赞数

文章标签： css3 css 前端

于 2023-04-04 10:08:10 首次发布

本文链接：https://blog.csdn.net/HGYYR/article/details/129946324

版权

css3 2D转换

1、转换

1、转换是css3中具有颠覆性的特征之一，可以实现元素的位移、旋转、特效等效果
2、转换分为：
    移动：translate
    旋转：rotate
    缩放：scale
3、2D：二维坐标系。是改变标签在二维平面上的形状和位置的一种技术
4、translate：改变元素在页面中的位置，类似于定位
   写法： transform: translate(x,y);
   
          /* x代表x轴上面移动位置，y就是y轴上移动位置，中间逗号分割 */
          /*代表向右移动200px,向下移动200px*/
            transform: translate(200,200);
            
             /* 只移动x轴 */
           transform: translateX(100px);
           
               /* 只移动y轴 */
          transform: translateY(100px);
          
          /* 根据百分比移动元素，y轴就根据高度百分比移动 */
           transform: translateY(50%);
           
5、translate总结：定义2D转换中的移动，沿着x轴和y轴移动元素
                 优点是不会影响到其他元素的位置（比如margin）
                  translate中的百分比单位相对于自身元素的translate
                  对行内标签没有效果
6、还可以通过定位、外边距来移动位置 
7、旋转：rotate：指的是让元素在2维平面内顺时针旋转或者逆时针旋转
   写法：  transform: rotate(度数);
   
           /* 顺时针旋转45度 */
          transform: rotate(45deg);
          
           /* 逆时针旋转 */
          transform: rotate(-45deg);
          
8、rotate总结：rotate里面是度数，单位是deg
             角度为正时，是顺时针，为负时，是逆时针
             默认旋转的中心点是元素的中心点
9、rotate设置转换中心点：
       transform-origin：x y;
       
        /* 设置转换中心点 :方位名词 */
       transform-origin: left  bottom;
       
        /* 设置转换中心点 :设置像素 */
       transform-origin: 50px  50px;
       
   注意;参数使用空格隔开
       x，y默认转换的中心点是元素的中心点（50%，50%）
       还可以给x，y设置像素或者方位名词（top，bottom，left，right，center）
10、缩放scale：缩放就是可以放大和缩小，能够控制元素的放大或者缩小
    写法：
         /* x修改的是宽度，y修改的是高度 ,不跟数字和高度，就是倍数*/
         /* transform: scale(x,y); */
         
         /* 宽高都是1倍，并没有任何效果 */
          transform: scale(1,1);
          
         /* 宽高放大2倍， */
          transform: scale(2,2); 
          
          * 宽高缩小1倍， */
          transform: scale(0.5,0.5)
          
          /* 括号里面只有一个参数，就是两个参数都是这个参数值 */
           transform: scale(2);
           
    注意：x和y要用逗号来隔开
         scale可以设置转换中心点缩放，不影响其他盒子
11、2D转换综合写法;同时使用多个转换，
                格式： 
                /*注意：translate里面是分号，转换之间不愿都好隔开*/
                transform: translate(100px,100px) rotate(45deg);
                
                transform:  rotate(45deg) translate(100px,100px) scale(2,2);
                      
     注意：1、顺序会影响转换的效果，先旋转会改变坐标轴方向
          2、如果同时有位移和其他属性的时候，记得要将位移放到最前面

0.9.93

https://www.bilibili.com/read/cv16572850/

2、skew和martix

1、skew:包含两个参数值，分别表示x轴和y轴的倾斜的角度，如果第二个参数为空，则默认为0，参数为负
        表示相反方向倾斜，斜切变形
       写法：transform: skew(30deg,30deg);
       
        
2、matrix：把所有方法转换成一个， 
       /* 旋转 缩放  缩放 旋转 位移 */
       /* 传入的不是度数，是弧度 */
        transform: matrix(0.886,1,3,0.886,200,100)

3、注意

1、如果想同时设置两个变形，那么要用空格隔开，
2、弧度和角度的换算关系如下：
   1弧度=180/π度
   1度=π/180弧度
   也就是说，180度=π 弧度

5、子元素垂直水平居中

1、子绝父相，然后给子盒子设置top和left值，然后设置margin-left和margin-top

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 400px;
            height: 200px;
            position: relative;
            background-color: rgba(251, 20, 247, 0.5);
        }

        nav {
            width: 50px;
            height: 50px;

            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -25px;
            margin-top: -25px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div>
        <nav></nav>
    </div>
</body>

</html>

2、子绝父相，然后给子盒子设置top和left值，设置translate

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 400px;
            height: 200px;
            position: relative;
            background-color: rgba(251, 20, 247, 0.5);
        }

        nav {
            width: 50px;
            height: 50px;

            position: absolute;
            top: 50%;
            left: 50%;
   transform: translate(-50%,-50%);
            background-color: red;
        }
    </style>
</head>

<body>
    <div>
        <nav></nav>
    </div>
</body>

</html>