CSS3+JS 实现超炫的散列画廊特效

实现画廊特效知识点
css:平面旋转、3D旋转、样式过度动画
js:翻转函数
ES6模板语法

实现步骤

  1. 实现css中的3d效果
    分为正反两面
    实现正反两面翻转的关键:transform-style:preserve-3d,
    transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。
    CSS3+JS 实现超炫的散列画廊特效

CSS3+JS 实现超炫的散列画廊特效

  1. 定义翻转函数

CSS3+JS 实现超炫的散列画廊特效

  1. 定义通用函数
    CSS3+JS 实现超炫的散列画廊特效
  2. 展示图片信息
    CSS3+JS 实现超炫的散列画廊特效
    CSS3+JS 实现超炫的散列画廊特效
  3. 左右分区随意分配图片
    5.1.定义左右选区范围函数
    CSS3+JS 实现超炫的散列画廊特效
    5.1.2.定义随机函数

CSS3+JS 实现超炫的散列画廊特效
5.1.3.定义排序函数
CSS3+JS 实现超炫的散列画廊特效