css transform transition

transform属性

---

旋转变形

将transform属性的值设置为rotate（），即可实现旋转变形

transform: rotate(45deg);旋转角度

若角度为正，则顺时针方向旋转，否则逆时针方向旋转

 

transform-origin属性

可以设置自己的自定义变换原点

/* 以网页左上角为原点进行旋转 */

transform-origin: 0 0;

---

缩放变形

将transform属性的值设置为scale（），即可实现缩放变形

transform: scale(3);缩放倍数

当数值小于1时，表示缩小元素；大于1表示放大元素

---

斜切变形

将transform属性的值设置为skew（），即可实现斜切变形

transform: skew(10deg,20deg); x斜切角度  y斜切角度 正数为逆时针

---

位移变形

将transform属性的值设置为translate（），即可实现位移变形

transform:translate(100px,200px);向右移动 向下移动

和相对定位非常像，位移变形也会“老家留坑”，“形影分离”

 

3D旋转

将transform属性的值设置为rotateX（）或者rotateY（），即可实现绕横轴、纵轴旋转

transform: rotateX(30deg);

transform: rotateY(30deg);

 

perspective属性：用来定义透视强度，可以理解为“人眼到舞台的距离”，单位是px

<div>此处是舞台，必须设置perspective属性

     <p></p>此处是演员，设置transform属性

</div>

 

空间移动

当元素进行3D旋转之后，即可继续添加translateX（）、translateY（）、translateZ（）属性让元素在空间进行移动

transform:rotateX(30deg) translateX(30px) translateY(30px) translateZ(100px);

 

制作一个正方体

.box p:nth-child(1){

            background-color: rgb(102, 21, 21,.5);

            /* 前 */

            transform: translateZ(100px);

        }

        .box p:nth-child(2){

            background-color: rgba(107, 197, 55, 0.5);

            /* 顶 */

            transform: rotateX(90deg) translateZ(100px);

        }

        .box p:nth-child(3){

            background-color: rgba(231, 142, 25, 0.5);

            /* 背 */

            transform:  rotateX(180deg) translateZ(100px);

        }

        .box p:nth-child(4){

            background-color: rgba(236, 16, 170, 0.5);

            /* 底 */

            transform:  rotateX(-90deg) translateZ(100px);

        }

        .box p:nth-child(5){

            background-color: rgba(63, 22, 212, 0.5);

            /* 右*/

            transform:  rotateY(-90deg) translateZ(100px);

        }

        .box p:nth-child(6){

            background-color: rgba(68, 30, 58, 0.5);

            /* 左 */

            transform:  rotateY(90deg) translateZ(100px);

        }

---

transition

transition过渡是css3浓墨重彩的特性，过渡可以为一个元素在不同样式之间变化自动添加：补间动画

过渡从IE10开始兼容，移动端兼容良好

transition属性基本使用：4个要素：1.什么属性要过渡2.动画时长3.变化速度曲线4.延迟时间

transition: width 1s linear 0s;

 

可以参与过渡的属性

1.所有数值类型的属性，比如width、height、left、top、border-radius

2.背景颜色和文字颜色都可以被过渡

3.所有变形（包括2d和 3d）都能被过渡

 

如果要所有的属性都参与过渡，可以写all

transition: all 1s linear 0s;

注：不要滥用，会引发效率问题

 

过渡的四个小属性

属性	意义
transition-property	哪些属性要过渡
transition-duration	动画时间
transiton-timing-function	动画变化曲线（缓动效果）
transition-delay	延迟时间

 

缓动参数

transition的第三个参数就是缓动参数，也是变化速度曲线

常用缓动参数：

1.ease两头慢中间快2.linear均速3.ease-in开始慢之后快4.ease-out开始快最后慢5.ease-in-out两头慢中间快，比ease更平缓

 

贝塞尔曲线：网站http://cubic-bezier.com/可以生成贝塞尔曲线，可以自定义动画缓动参数

transition: width 1s cubic-bezier(0.1,0.7,1.0,0.1)  0s;

 

过渡效果实战

 /* 透明度设置为0 */

   opacity: 0;

/* 设置变形类型，保留它内部的3D效果 */

/* 这个盒子又是舞台，又是演员，这个box整体带着里面的p旋转 */

 transform-style: preserve-3d;

---

动画

动画的定义

可以使用@key-frames来定义动画，keyframes表示“关键帧”，在项目上线前，要补上@-webkit-这样的私有前缀

@keyframes r {

                from{

                    transform:rotate(0);

                }

                to{

                    transform:rotate(360deg);

                }

            }

r:动画名字

from：起始状态

to：结束状态

 

动画的调用

定义动画后，就可以使用animation属性调用动画

animation: r 1s linear 0s 3;动画名字 总时长 缓动效果 延迟 执行次数

第五个参数动画的执行次数：如果想永远执行可以写infinite

第六个参数：alternate和forwards

如果想让动画的第2、4、6…（偶数次）自动逆向执行，那么要加上alternate参数即可

如果想让动画停止在最后结束状态，那么要加上forwards

 

多关键帧动画

用百分数表示时间阶段

@keyframes r{

                0%{

                    transform:rotate(0);

                }

                30%{

                    transform:rotate(30deg);

                }

                60%{

                    transform:rotate(60deg);

                }

                100%{

                    transform:rotate(90deg);

                }

            }