css动画改变高度有过渡效果,css3-形变、过渡、动画

一、2D形变

平移

transform:translate(x，y)

相对当前位置，向左移动x像素，像下移动y像素

transform:translateX(num)

相对当前位置，向左移动num像素

transform:translateY(num)

相对当前位置，向下移动num像素

缩放

transform:scale(x，y)

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

transform:scaleX( num )

改变元素的宽度

transform:scaleY( num )

改变元素的高度

旋转

transform:rotate( 角度 );

参数是一个角度，表示旋转多少度

倾斜

transform:skew(角度x，角度y)

沿着x轴旋转多少度，沿着y轴转多少度

transform:skewX(角度x)

沿着x轴旋转多少度

transform:skewY(角度y)

沿着y轴旋转多少度

二、3D形变

平移

transform:translate3d( x , y , z );

定义三个方向上的平移

transform:translateZ( z );

定义Z方向的平移(单用看不出效果)

缩放

transform: scale3d( x , y , z);

定义3个方向上的缩放，同时可以分别实现3个方向的分别设置

旋转

rotate3d( x , y , z , angle )

x，表示旋转轴X坐标方向的矢量。

y，表示旋转轴Y坐标方向的矢量。

z，表示旋转轴Z坐标方向的矢量。

angle，表示旋转角度。正的角度值表示顺时针旋转，负值表示逆时针旋转。

三、过渡

transition属性

通过transition，我们可以在不使用flash的情况下，让元素从一种样式变化成另一种样式

body{

position: relative;

}

#box{

height: 100px;

width: 100px;

background-color: skyblue;

transition: margin-left 3s;

}

// var box = document.querySelector("box");

box.onclick = function(){

this.style.marginLeft = "600px";

}