transform
功能:向元素应用2D或3D转换
语法:transform:none|transform-functions
参数:
translate3d(x,y,z)定义3D转化
rotate3d(x,y,z,angle)定义3D旋转
scale3d(x,y,z,flex)定义3D缩放
transform-origion
transition
功能:在一定的时间区间内平滑地过渡指定的属性值。
语法:transform:property duration timing-function delay;
参数:
propert规定设置过渡效果的css属性的名称
duration规定完成过渡效果需要多少秒或毫秒
timing-function规定速度效果的速度曲线
delay定义过渡效果何时开始
Examples
.tooltip-effect-1 .tooltip-content {
-webkit-transform: translate3d(0,10px,0) rotate3d(1,1,1,45deg); /*rotate3d前三个参数[0,1]*/
transform: translate3d(0,10px,0) rotate3d(1,1,1,45deg); /* translateX, translateY, translateZ*/
-webkit-transform-origin: 50% 100%; /*只有定义了transform才。。。*/
transform-origin: 50% 100%; /*等价center bottom*/
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s; /*过渡时,多个属性逗号分隔*/
transition: opacity 0.3s, transform 0.3s;
}