CSS3之transform与transition

1.2D转换

• rotate()：在一个给定度数顺时针旋转的元素，负值是允许的，这样是元素逆时针旋转

div{
     background:black;
     border:1px solid red;
      height:100px;
      width:100px;
      box-sizing:border-box;
      transform: rotate(30deg)
    }

• translate()：根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动

transform: translate(50px,100px);

• scale()：该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数

transform: scale(2,3); /*转变宽度为原来的大小的2倍，和高度为其原始大小3倍*/

• skew() ：包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜

transform: skew(30deg,20deg);
/*
skewX(<angle>);表示只在X轴(水平方向)倾斜。
skewY(<angle>);表示只在Y轴(垂直方向)倾斜
*/

2.3D转换

• rotateX：围绕其在一个给定度数X轴旋转的元素

transform: rotateX(120deg)

• rotateY：围绕其在一个给定度数Y轴旋转的元素

transform: rotateY(120deg)

• 其他方法和2D转换类似

3.transition

• 元素从一种样式逐渐改变为另一种的效果

div{
      transition: width 2s, height 2s, transform 2s;
   }
/*在宽度、高度和转换上2s完成过渡效果*/

• 属性

transition: property duration timing-function delay;
transition-property：指定CSS属性的name，transition效果
transition-duration：transition效果需要指定多少秒或毫秒才能完成
transition-timing-function:指定transition效果的转速曲线
transition-delay:定义transition效果开始的时候