HTML+CSS

1.2D转换之缩放scale

• 数字无单位 指的是倍数

• transform: scale(x,y);

        transform: scale(2,1);

• 等比例缩放同时修改宽度高度

        transform: scale(2);

• 缩小 小于1就是缩放

        transform: scale(0.5,0.5);

• scale的优势之处：不会影响其他的盒子 而且可以设置所犯的中心点

        transform-origin: left bottom; /*以左下角为中心点进行缩放*/ 

2.动画

   制作步骤：1.先定义动画 2.再调用动画

/*css*/
@keyframes 动画名称 {
       0% {
           width: 100px;
       }
       100% {
           width: 200px
       }
}

   元素使用动画

div {
   	/* 调用动画 */
    animation-name: 动画名称;
    /* 持续时间 */
    animation-duration: 持续时间；
}

   动画属性

div{
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 动画名称 */
            animation-name: move;
            /* 持续时间 */
            animation-duration: 2s;
            /* 运动曲线 */
            animation-timing-function: ease;
            /* 何时开始 */
            animation-delay: 1s;
            /* 重复次数 interation 重复的 count 次数 infinite 无限 */
            /* animation-iteration-count: infinite; */
            /* 是否反方向播放 默认是时normal 如果想要反方向 就写alterbate */
            /* animation-direction: alternate; */
            /* 动画结束后默认的是回到起始状态 backwards 用forwards可以让他停留在结束状态 */
            animation-fill-mode: forwards;
            
}
div:hover{
            /* 鼠标经过可以暂停动画 鼠标离开停止动画 */
            animation-play-state: paused;
}

   动画属性缩写形式： 

        animation: move duration timing-function delay interation-count direction fill-mode;

        前面两个属性一定要写

        简写属性中不包含animation-play-state

3.3D移动

   translateZ：

   1.translateZ 沿着Z轴移动

   2.translateZ 后面的单位一般跟px

   3.translateZ（100px）向外移动100px

   4.简写：

      transform:translate3d(x,y,z);

      transform:trandlate3d(100px,100px,100px);

   5.xyz是不能省略的 如果没有就写0

   透视

   透视写在被观察元素的父盒子上面

   透视的单位是像素

   近大远小

   3D旋转

   transform:rotate3d(x,y,z,度数)  单位deg

   如transform:rotate3d(1,0,0,45deg)

   

   3D呈现transform-style

   控制子元素是否开启三维立体环境

   transform-style:flat子元素不开启3d立体空间 默认的

   transform-style:preserve-3d 子元素开启立体空间

   代码写给父级 但是影响的是子盒子