本文内容概览：
过渡（CSS3）transition
transition语法格式
transition：要过渡的属性 花费时间 运动曲线 何时开始； /* 如果有多组属性变化时，还是用逗号隔开；一般只需要前面两个属性即可 */ /* 以上示例代码如下 */ transition: width 0.5s; /* 如果高度也发生变化时 */ transition: width 0.5s, height 0.5s;
transition属性值：
transform：实现2D|3D效果
2D变形（CSS3）transform
定位的盒子居中对齐的完美写法
/* translate:移动距离，如果是 %，则以自身宽度为准 */ transform: translate(50%,50%); position: absolute; left:50%; top:50%; /* 需要计算，并不适用 */ /* margin-left: 盒子宽度的一半 px; */ /* margin-top: 盒子高度的一半 px */ transform: translate(-50%,-50%);
设置变形中心点
transform-origin：可以调整元素转换变形的原点；
/* 改变元素的原点，可以是盒子的任意位置；left top是以左上角为原点；*/ transform-origin: left top; /* 如果是四个角可以用left、top、right、bottom，但是想要精确的位置，可以用 px 像素 */ transform-origin: 10px 20px; /* rotate()：单位是 deg 度数 */ transform: rotate(45deg);
3D变形（CSS3）transform
左手法则：分别以X（rotateX）、Y（rotateY）、Z（rotateZ）轴为中心进行旋转
/* 以 X 轴 为中心旋转*/ transform: rotateX(); /* 以 Y 轴 为中心旋转*/ transform: rotateY(); /* 以 Z 轴 为中心旋转*/ transform: rotateZ();
透视
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { /* 视距：perspective； 视距越大，效果越不明显； 视距越小，效果越明显； */ perspective: 300px; } img { margin: 100px; width: 200px; /* 过渡 */ transition: all 5s; /* 设置变形中心点 */ transform-origin: left; } img:hover { /* 设置3D变形 */ transform: rotateY(80deg); } </style> </head> <body> <img src="../../../assets/images/yangzi.jpeg"> </body> </html>
页面效果如下：
综合写法：
/* x,y 轴的单位可以是 px 也可以是 % 但是 z 轴只能是 px */ transform: translate3d(x, y, z);
动画
/*animation: 动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向 动画之外的状态; */ animation: name duration timing-function delay iteration-count direction fill-mode;
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> img { width: 200px; /* purpleYang：动画名称 3s: 动画时间 2：循环次数，默认是1次 infinite：无限循环(循环次数) alternate: 反方向开始 一般情况下，默认只写 动画名称 和 动画时间 即可； */ animation: purpleYang 3s 0s infinite alternate; } /* @keyframes: 规定动画 purpleYang：引用选择器中设置的 动画名称 from{} to{}：起始位置 --> 结束位置 from--to 也可以用百分比代替：0%（相当于起始位置）；100%（相当于结束位置） 0% { transform: translate3d(0, 0, 0); } 25% { transform: translate3d(600px, 0 ,0); } 50% { transform: translate3d(600px, 400px ,0); } 75% { transform: translate3d(0, 400px ,0); } 100% { transform: translate3d(0, 0 ,0); } */ @keyframes purpleYang { from { transform: translateX(0); } to { transform: translateX(600px); } } </style> </head> <body> <img src="../../../assets/images/yangzi.jpeg"> </body> </html>
页面效果：图片在水平方向从0px 到 600px 来回滑动；
原文：https://www.cnblogs.com/Chestnut-g/p/14311804.html
