前端学习——CSS3_2D转换效果

2D转换(transform)

• 2D转换是改变标签在二维平面上的位置和形状
• 移动： translate
• 旋转：rotate
• 缩放： scale

1. 移动 translate 语法

 transform: translate(x, y)
 transform: translateX(n)
 transfrom: translateY(n)

• translate`最大的优点就是不影响其他元素的位置
• translate中的100%单位，是相对于本身的宽度和高度来进行计算的
• 行内标签没有效果

div {
  background-color: lightseagreen;
  width: 200px;
  height: 100px;
  /* 平移 */
  /* 水平垂直移动 100px */
  transform: translate(100px, 100px);

  /* 水平移动 100px */
   transform: translate(100px, 0) 

  /* 垂直移动 100px */
  transform: translate(0, 100px) 

  /*水平移动 100px */
   transform: translateX(100px); 

  /* 垂直移动 100px */
  transform: translateY(100px)
}

让一个盒子水平垂直居中

transform: translate(-50%,-50%);

2.旋转 rotate 语法

/* 单位是：deg */
transform: rotate(度数) 

• 角度为正时顺时针，角度为负时逆时针
• 默认旋转的中心点是元素的中心点

1. 代码演示(鼠标放置时旋转360度)

   使用过渡方法transition: all 1s;体现旋转360度 否则看不出动画效果

	div{
            background-color: pink;
            width: 50px;
            height: 69px;
           /* 过渡写到谁身上，谁做动画谁来加 */
           transition: all 1s;
        }
div:hover{
            border: 1px solid brown;
            transform: rotate(360deg);
        }

2.1 旋转 rotate 实战使用案例之 三角

• 使用div::after在div盒子内容后生成一个只显示两条边框的小div
• 使用 在div::after中使用transform: rotate(45deg);使得旋转成小三角
• 使用子绝父相调整div::after的位置在盒子右边适当位置
• 使用div:hover::after 使得鼠标经过div时内部小三角产生旋转
• 使用transition:all 0.3s ;完成过渡效果

 div{
            position: relative;
            width: 500px;
            height: 30px;
            border: 1px solid brown;
        }

        div::after{
            content: "";
            position: absolute;
            width: 10px;
            height: 10px;
            top: 10px;
            right: 15px;
            border-right: 1px solid black;
            border-bottom: 1px solid black;
            transform: rotate(45deg);
            transition:all 0.3s ;
        }
                
        div:hover::after{
            
            transform: rotate(-135deg);
        }

2.2 旋转 rotate 实战使用改变中心点旋转

1. transform-origin 基础语法

   transform-origin: x y;
   

2. 重要知识点

   • 注意后面的参数 x 和 y 用空格隔开
   • x y 默认旋转的中心点是元素的中心 (50% 50%)，等价于 center center
   • 还可以给 x y 设置像素或者方位名词(top、bottom、left、right、center)

2.2 旋转 rotate 实战 --实战旋转效果案例（常用）

 div{
         width: 100px;
         height:100px;
        border: 1px solid black;
   	//只显示div边框里面内容
        overflow: hidden;
     }
     div::before{
       //before与after都需要有content才可以显示内容
         content: "哈哈";
         background-color: pink;
       	//display变成块级元素
       display: block;
         widows: 100%;
         height: 100%;
         //改变中心点为左下角 旋转一百八十度配合overflow: hidden隐藏
         transform-origin: left bottom;
         transform: rotate(180deg);
      	 //过渡效果显示
         transition: all 0.3s;
        
     }
     div:hover::before{
       //鼠标经过时回到原本角度
        transform: rotate(0deg);
     }

2.3 缩放scale

控制元素的放大与缩小

transform: scale(x, y)

1. 知识要点

   • 注意，x 与 y 之间使用逗号进行分隔
   • transform: scale(1, 1): 宽高都放大一倍，相当于没有放大
   • transform: scale(2, 2): 宽和高都放大了二倍
   • transform: scale(2): 如果只写了一个参数，第二个参数就和第一个参数一致
   • transform:scale(0.5, 0.5): 缩小
   • scale最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子

2. 代码演示

      div:hover {
   	   /* 注意，数字是倍数的含义，所以不需要加单位 */
   	    transform: scale(2, 2) 
      
   	   /* 实现等比缩放，同时修改宽与高 */
   	    transform: scale(2) 
      
   	   /* 小于 1 就等于缩放*/
   	   transform: scale(0.5, 0.5)
      }
   

2.4 2D转换综合写法以及顺序问题

1. 知识要点

   • 同时使用多个转换，其格式为 transform: translate() rotate() scale()
   • 顺序会影响到转换的效果(先旋转会改变坐标轴方向)
   • 但我们同时有位置或者其他属性的时候，要将位移放到最前面

2. 代码演示

   div:hover {
     transform: translate(200px, 0) rotate(360deg) scale(1.2)
   }
   

注：

• transition: all 1s; 过渡效果,过渡写到谁身上，谁做动画谁来加，调节动画效果的时间快慢
• 伪类选择器before ，after需要用content: " "才能显示出内容;