- 1、transition-property 设置过渡的属性，比如：width height background-color
- 2、transition-duration 设置过渡的时间，比如：1s 500ms
- 3、transition-timing-function 设置过渡的运动方式，常用有 linear(匀速)|ease(缓冲运动)
- 4、transition-delay 设置动画的延迟
- 5、属性连写:transition: property duration timing-function delay 同时设置四个属性
width:200px;
height:200px;
background: red;
/*transition-property: width;
transition-duration:2s;
transition-timing-function:linear;
transition-delay: 2s;*/
/*transition:width 1s linear,height 1s linear,background-color 1s linear;*/
transition: all 3s ease;
}
.box:hover{
width:500px;
height: 50px;
background-color: green;
}
transform变换
形变效果
- 1.translate(x,y) 设置盒子位移
- 2.scale(x,y) 设置盒子缩放
- 3、rotate(deg) 设置盒子旋转
- 4、skew(x-angle,y-angle) 设置盒子斜切
- spective 设置透视距离
/*transform 形变属性 缩放 平移 旋转*/
/*transform:scale(2,2);*/
/*transform:translate(0,200px);*/
/*transform: rotate(45deg);*/
/*transform:rotateX(180deg);*/
/*perspective(800px)3d透视效果*/
/*transform:perspective(800px) rotateY(45deg);*/
/*//斜切*/
transform: skew(30deg,45deg);
}
设置形变中心
tranform-origin设置变形的中心点,接受两个参数，它们可以是百分比，em，px等具体的值，也可以是left,center,right
三维形变
- translateX、translateY、translateZ 设置三维移动
- rotateX、rotateY、rotateZ 设置三维旋转
- scaleX、scaleY、scaleZ 设置三维缩放
设置盒子背景是否可见
backface-visibility设置盒子背面是否可见
设置盒子是否按照3d展示
transform-styleflat | preserve-3d 设置盒子是否按3d空间显示
/*backface-visibility: hidden;*/
/*是否已3d的空间展示效果*/
/*transform-style: flat;*/
)
)
