transition动画与transform变换（了解

来源：互联网发布：c语言中stdlib 编辑：程序博客网时间：2024/05/16 15:39

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;*/

阅读全文

0 0