CSS3-2d3d

　　　　　　1、过渡（transition）操作谁，给谁加过渡

　　　　　　　　transition：要过渡的属性     花费时间    运动曲线    何时开始；    多组属性变化，还是用 逗号 隔开

　　　　　　　　transition-property：规定应用过渡的CSS属性的名称。

　　　　　　　　transition-duration：定义过渡效果花费的时间，默认是0。

　　　　　　　　transition-timing-function：规定过渡效果的时间曲线，默认是ease   

　　　　　　　　　　linear：匀速             ease：逐渐慢下来         ease-in：加速         ease-out：减速          ease-in-out：先加速后减速

　　　　　　　　transition-delay：规定过渡效果何时开始，默认是0

　　　　　　　　简写：transition：all  0.5s；   // 所有的属性执行过渡   花费0.5秒的时间

 

　　　　　　2、变形（transform）

　　　　　　　　　1.位移（translate（x，y））

　　　　　　　　　　transform：translateX（x）；  //  仅水平方向移动

　　　　　　　　　　transform：translateY（y）；  //  仅垂直方向移动
　　　　　　　　　　transform：translate（20px，10px）；  // 向右向下分别平移20px，10px

　　　　　　　　　2.缩放（scale（x，y））

　　　　　　　　　　transform：scaleX（x）；  //  仅水平方向缩放

　　　　　　　　　　transform：scaleY（y）；  //  仅垂直方向缩放

　　　　　　　　　　transform：scale（0.5，0.5）；  元素x，y方向缩小0.5倍

　　　　　　　　　3.旋转（rotate（deg））

　　　　　　　　　　对元素进行旋转，正值顺时针，负值逆时针

　　　　　　　　　　transform：rotate（180deg）； // 顺时针旋转180度

　　　　　　　　　　transform-origin：top right；  // 可以调整元素转换变形的原点  默认中心点 旋转 ，如果想要精确位置，可以用 px 像素

　　　　　　　　　4.倾斜（skew（deg，deg））

　　　　　　　　　　transform：skew（30deg，0deg）；   //  通过 skew 方法把元素水平方向向上倾斜30度，垂直方向不变。

　　　　 　　　　　5.3D变形（transform（x，y，z））

　　　　　　　　　　x 左边是负值，右边是正值

　　　　　　　　　　y 上面是负值，下面是正值

　　　　　　　　　　z 里面是负值，外面是正值

　　　　　　　　　　transform：rotateX（180deg）； //  围绕X轴旋转

　　　　　　　　　　transform：rotateY（180deg）； //  围绕Y轴旋转

　　　　　　　　　　transform：rotateZ（180deg）；  // 类似普通旋转

　　　　　　　　　6.透视（perspective）

　　　　　　　　　　perspective 一般作为一个属性，设置给父元素作用于所有3D 转换的子元素

　　　　　　　　　　perspective：500px；  //  透视原理：近大远小

　　　　　　　　　　在透视效果中 transform：translateZ（300px）；  // z值越大（接近透视的值），看到的物体越近，物体越大

　　　　　　　　　　3D效果提供一种综合写法：

　　　　　　　　　　　　transform：translate3d（x，y，z）；  //  其中x，y轴单位可以是px，也可以是%，但是 z 轴只能是 px

　　　　　　　　　7.backface-visibility：当元素不面对屏幕时是否可见（一般用于两个盒子翻转）

 

　　　　　　　　　8.动画效果（animation）　　

　　　　　　　　　　　　animation: go 2s ease-in .5s infinite alternate;   //  动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向    infinite 无限循环

　　　　　　　　　　  animation-play-state：paused；    // 暂停动画

 

　　　　　　　　　　  /* 一般情况下，我们只用前两个， animation：go 2s; */

　　　　　　　　　　animation-direction: reverse;

　　　　　　　　　　/*

　　　　　　　　　　　设置动画在循环中是否反方向运动

　　　　　　　　　　　animation-direction: reverse;

　　　　　　　　　　　默认：normal 正常方向

　　　　　　　　　　　　　　reverse：反方向运动

　　　　　　　　　　　　　　alternate：动画先正常运行，再反方向运行，并持续交替运行

　　　　　　　　　　　　　　alternate-reverse：动画先反运行再正方向运行，并持续交替运行

　　　　　　　　　　*/

　　　　　　　　　　/* @keyframes 动画名称{} 定义动画 */

　　　　　　　　　　　@keyframes go{

　　　　　　　　　　/* 从哪里开始，到哪里结束 动画的起始点 和 结束点 */

　　　　　　　　　　　form{

　　　　　　　　　　　　　transform: rotateX(0);

　　　　　　　　　　　}

　　　　　　　　　　　to{

　　　　　　　　　　　　　transform: translateX(800px);

　　　　　　　　　　　}

转载于:https://www.cnblogs.com/qtbb/p/11431127.html