CSS3-2D转换、3D转换、过渡

2D转换

作用:可以移动,缩放,反转,旋转,拉伸元素。

兼容性:IE9+

使用方式:

transform: xx;
-ms-transform: xx; /* IE 9 */
-webkit-transform: xx; /* Safari and Chrome */
-moz-transform: xx; /*firefox*/
-o-transform: xx; /*opera*/

translate()

作用:移动元素,translate(水平距离,垂直距离)

如:

div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}

把div水平方向移动50px,垂直方向移动100px;

rotate()

作用:以一定度数旋转元素,rotate(角度)

如:

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}

把div顺时针旋转30度

transform-origin: 0 0;以左上角作为中心点

scale()

作用:以一定比例放大缩小元素,scale(水平方向倍数,垂直方向倍数)

如:

div
{
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari and Chrome */
}

skew()

作用:绕水平或者垂直方向旋转

如:

div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}

skew(30deg,20deg)是绕X轴和Y轴周围20度30度的元素。

比较以下几个例子理解

eg:

.div1{
    transform: skew(10deg,0deg);
}
.div2{
    transform: skew(0deg,10deg);
}
.div3{
    transform: skew(10deg,-10deg);
}
.div4{
    transform: rotate(10deg);
}

参考: 用css+js做一个时钟

3D转换

兼容性:ie10+

translate3d(x,y,z)

  • translateX(x) x轴方向位移
  • translateY(y) y轴方向位移
  • translateZ(z) z轴方向位移

scale3d(x,y,z)

  • scaleX(x)
  • scaleY(y)
  • scaleZ(z)

rotate3d

  • rotateX(angle) 定义沿 X 轴的 3D 旋转。
  • rotateY(angle) 定义沿 Y 轴的 3D 旋转。
  • rotateZ(angle) 定义沿 Z 轴的 3D 旋转。

知识点:可以使用transform 3d来开启硬件加速,使GPU 发挥功能,从而提升性能。

使用方法: 在css中使用3d转换即可。

div {
   -webkit-transform: translateZ(0);
   -moz-transform: translateZ(0);
   -ms-transform: translateZ(0);
   -o-transform: translateZ(0);
   transform: translateZ(0);
}

过渡transition

使用CSS实现从一种效果转换到另一种效果

兼容性: IE10+

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点,必须规定两项内容: - 指定要添加效果的CSS属性 - 指定效果的持续时间。

transition: 属性 时间, 属性 时间... ;

div
{
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}
div:hover
{
width:300px;
}

同时监视多个属性

div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s, height 2s, transform 2s;
}

div:hover {
    width: 200px;
    height: 200px;
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
}