css3变形

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第5天，点击查看活动详情。

一。CSS3变形是一些效果的集合

每个效果都可以称为变形（transform），它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化

设置变形函数，★ 可以是一个，也可以是多个，中间以空格分开 ; ①。translate()：平移函数，基于X、Y坐标重新定位元素的位置

  .a{
        width: 100px;
        height: 100px;
        background-color: red;
        margin-bottom:  100px;
       transform: translate(50px,50px);当translate只设置一个值时表示向右平移
        也可以写成 transform: translateX(50px) translateY(50px);
    }

②。scale()：缩放函数，可以使任意元素对象尺寸发生变化

  .a{
        width: 100px;
         height: 100px;
        background-color: red;
        margin-bottom:  100px;
        transform: scale(2,.5);当值设置为1的时候表示大小不变，只设置一个值的时候表示向右向下都放大或者缩小
        也可以写成transform: scaleX(2) scaleY(.5);
     }

③。rotate()：旋转函数，取值是一个度数值

     .a{
        width: 100px;
        height: 100px;
        background-color: red;
        margin-bottom:  100px;
        transform: rotate(100deg);
     }

④。skew()：倾斜函数，取值是一个度数值

  .a{
        width: 100px;
        height: 100px;
        background-color: red;
        margin-bottom:  100px;
        transform: skew(30deg,50deg);只设置一个值表示向左倾斜
        也可以写成transform: skewX(30deg) skewY(50deg);
     }