web移动端总结

分空间转换3D

记住3个坐标轴取值的正反:

  • X 轴 往右越大,是正值, 否则反之

  • Y 轴 往下越大,是正值,否则反之

  • Z轴 往越大,是正值,否则反之 Z轴指向我们

3D位移

 transform: translate3d(x, y, z);  // 连些形式

分开写

transform: translateX(100px);   // 正值往右,负值往左
transform: translateY(100px);   // 正值往下,负值往上
transform: translateZ(100px);  // 正值往外(用户方向),负值往里

 透视 

透视的作用: 空间转换时,为元素添加近大远小、近实远虚的视觉效果

 perspective: 800px;  // 给父元素添加

透视注意事项:

  1. 取值范围经常在 800px ~ 1200px 之间。

  2. 一定给父元素添加

  3. 透视距离也称为视距,所谓的视距就是人的眼睛到屏幕的距离。

  4. 其中 d 为透视的距离

  5. z 是 translateZ 的距离, 这个距离靠近我们,盒子越大

3D旋转rotate

 transform: rotateX(360deg); // 水平方向,正值往里旋转,负值反向

 transform: rotateY(360deg);  // 垂直方向,正值往里旋转,负值反向

 transform: rotateZ(360deg)  跟2D旋转类似

 左手法则

一定要搞清楚X轴和Y轴如何旋转的,旋转的度数是正值还是负值。

  1. 大拇指指向X轴正向方(右), 则四指指向的方向是旋转的方向

  2. 大拇指指向Y轴正向方(下), 则四指指向的方向是旋转的方向

立体呈现

transform-style: preserve-3d;  

让子盒子在父盒子内有空间的展示,此时可以给父亲添加

动画

动画最大的特点可以不用鼠标触发,自动的,反复的执行某些动画。

动画使用分为定义和调用:

// 定义动画

@keyframes dance {

    from {
        transform: scale(1)
    }

    to {
        transform: scale(1.5)
    }
}
// 调用


img {
    width: 200px;
    /* 2. 使用动画  animation: 动画名称 执行时间;   infinite 循环*/
    animation: dance .5s infinite;
}

动画属性

web移动端总结

  1. 动画名字参照css类选择器命名

  2. 动画时长和延迟时间别忘了带单位 s

  3. infinate 无限循环动画

  4. alternate 为反向 就是左右来回执行动画

  5. forwards 动画结束停留在最后一帧状态

  6. linear 让动画匀速执行

/* 鼠标经过box,  则 ul 停止动画 */
.box:hover ul {
    animation-play-state: paused;
}
/* 我们想要2个动画一起执行  animation: 动画1, 动画2, ... 动画n */
animation: run 1s steps(12) infinite, move 5s linear forwards;

上一篇:iOS UITextView 展示html


下一篇:使用原生dom及js实现类似vben-admin图片裁剪效果