使用纯CSS实现的图像瓦片切分翻转波动转场动画

Image Slice Flip Ripple Transition 经典图片轮播转场动画：方块切片渐入

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 3239
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

.tileable-image {
    width: 650px;
    height: 434px;
    -webkit-perspective: 1000px;
    perspective: 1000px;
}
.tileable-image-tile {
    float: left;
    position: relative;
}
.tileable-image-tile,
.tileable-image-tile:before,
.tileable-image-tile:after {
    width: 81.25px;
    height: 72.33333px;
}
.tileable-image-tile:before,
.tileable-image-tile:after {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    content: ' ';
    display: block;
    left: 0;
    position: absolute;
    top: 0;
}
.tileable-image-tile:before {
    background: url("https://c1.staticflickr.com/7/6061/6132499271_a0de941768_b_d.jpg") 0 0 / 650px 434px;
}
.tileable-image-tile:after {
    background: url("https://c2.staticflickr.com/4/3839/14793665576_ddb007d199_b_d.jpg") 0 0 / 650px 434px;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
.tileable-image-tile:nth-child(1):before,
.tileable-image-tile:nth-child(1):after {
    background-position: 0px 0px;
}
.tileable-image-tile:nth-child(1):before {
    -webkit-animation: 0.5s linear 0.5s 1 alternate forwards flip-front;
    animation: 0.5s linear 0.5s 1 alternate forwards flip-front;
}
.tileable-image-tile:nth-child(1):after {
    -webkit-animation: 0.5s linear 0.5s 1 alternate forwards flip-back;
    animation: 0.5s linear 0.5s 1 alternate forwards flip-back;
}
.tileable-image-tile:nth-child(2):before,
.tileable-image-tile:nth-child(2):after {
    background-position: -81.25px 0px;
}
.tileable-image-tile:nth-child(2):before {
    -webkit-animation: 0.5s linear 0.6s 1 alternate forwards flip-front;
    animation: 0.5s linear 0.6s 1 alternate forwards flip-front;
}
.tileable-image-tile:nth-child(2):after {
    -webkit-animation: 0.5s linear 0.6s 1 alternate forwards flip-back;
    animation: 0.5s linear 0.6s 1 alternate forwards flip-back;
}
.tileable-image-tile:nth-child(3):before,
.tileable-image-tile:nth-child(3):after {
    background-position: -162.5px 0px;
}
.tileable-image-tile:nth-child(3):before {
    -webkit-animation: 0.5s linear 0.7s 1 alternate forwards flip-front;
    animation: 0.5s linear 0.7s 1 alternate forwards flip-front;
}
.tileable-image-tile:nth-child(3):after {
    -webkit-animation: 0.5s linear 0.7s 1 alternate forwards flip-back;
    animation: 0.5s linear 0.7s 1 alternate forwards flip-back;
}
.tileable-image-tile:nth-child(4):before,
.tileable-image-tile:nth-child(4):after {
    background-position: -243.75px 0px;
}
.tileable-image-tile:nth-child(4):before {
    -webkit-animation: 0.5s linear 0.8s 1 alternate forwards flip-front;
    animation: 0.5s linear 0.8s 1 alternate forwards flip-front;
}
.tileable-image-tile:nth-child(4):after {
    -webkit-animation: 0.5s linear 0.8s 1 alternate forwards flip-back;
    animation: 0.5s linear 0.8s 1 alternate forwards flip-back;
}
.tileable-image-tile:nth-child(5):before,
.tileable-image-tile:nth-child(5):after {
    background-position: -325px 0px;
}
.tileable-image-tile:nth-child(5):before {
    -webkit-animation: 0.5s linear 0.9s 1 alternate forwards flip-front;
    animation: 0.5s linear 0.9s 1 alternate forwards flip-front;
}
.tileable-image-tile:nth-child(5):after {
    -webkit-animation: 0.5s linear 0.9s 1 alternate forwards flip-back;
    animation: 0.5s linear 0.9s 1 alternate forwards flip-back;
}
.tileable-image-tile:nth-child(6):before,
.tileable-image-tile:nth-child(6):after {
    background-position: -406.25px 0px;
}
.tileable-image-tile:nth-child(6):before {
    -webkit-animation: 0.5s linear 1s 1 alternate forwards flip-front;
    animation: 0.5s linear 1s 1 alternate forwards flip-front;
}
.tileable-image-tile:nth-child(6):after {
    -webkit-animation: 0.5s linear 1s 1 alternate forwards flip-back;
    animation: 0.5s linear 1s 1 alternate forwards flip-back;
}
.tileable-image-tile:nth-child(7):before,
.tileable-image-tile:nth-child(7):after {
    background-position: -487.5px 0px;
}
.tileable-image-tile:nth-child(7):before {
    -webkit-animation: 0.5s linear 1.1s 1 alternate forwards flip-front;
    animation: 0.5s linear 1.1s 1 alternate forwards flip-front;
}
.tileable-image-tile:nth-child(7):after {
    -webkit-animation: 0.5s linear 1.1s 1 alternate forwards flip-back;
    animation: 0.5s linear 1.1s 1 alternate forwards flip-back;
}
.tileable-image-tile:nth-child(8):before,
.tileable-image-tile:nth-child(8):after {
    background-position: -568.75px 0px;
}
.tileable-image-tile:nth-child(8):before {
    -webkit-animation: 0.5s linear 1.2s 1 alternate forwards flip-front;
    animation: 0.5s linear 1.2s 1 alternate forwards flip-front;
}
.tileable-image-tile:nth-child(8):after {
    -webkit-animation: 0.5s linear 1.2s 1 alternate forwards flip-back;
    animation: 0.5s linear 1.2s 1 alternate forwards flip-back;
}
.tileable-image-tile:nth-child(9):before,
.tileable-image-tile:nth-child(9):after {
    background-position: 0px -72.33333px;
}
.tileable-image-tile:nth-child(9):before {
    -webkit-animation: 0.5s linear 0.6s 1 alternate forwards flip-front;
    animation: 0.5s linear 0.6s 1 alternate forwards flip-front;
}
.tileable-image-tile:nth-child(9):after {
    -webkit-animation: 0.5s linear 0.6s 1 alternate forwards flip-back;
    animation: 0.5s linear 0.6s 1 alternate forwards flip-back;
}
.tileable-image-tile:nth-child(10):before,
.tileable-image-tile:nth-child(10):after {
    background-position: -81.25px -72.33333px;
}
.tileable-image-tile:nth-child(10):before {
    -webkit-animation: 0.5s linear 0.7s 1 alternate forwards flip-front;
    animation: 0.5s linear 0.7s 1 alternate forwards flip-front;
}
.tileable-image-tile:nth-child(10):after {
    -webkit-animation: 0.5s linear 0.7s 1 alternate forwards flip-back;
    animation: 0.5s linear 0.7s 1 alternate forwards flip-back;
}
.tileable-image-tile:nth-child(11):before,
.tileable-image-tile:nth-child(11):after {
    background-position: -162.5px -72.33333px;
}
.tileable-image-tile:nth-child(11):before {
    -webkit-animation: 0.5s linear 0.8s 1 alternate forwards flip-front;
    animation: 0.5s linear 0.8s 1 alternate forwards flip-front;
}
.tileable-image-tile:nth-child(11):after {
    -webkit-animation: 0.5s linear 0.8s 1 alternate forwards flip-back;
    animation: 0.5s linear 0.8s 1 alternate forwards flip-back;
}
.tileable-image-tile:nth-child(12):before,
.tileable-image-tile:nth-child(12):after {
    background-position: -243.75px -72.33333px;
}
.tileable-image-tile:nth-child(12):before {
    -webkit-animation: 0.5s linear 0.9s 1 alternate forwards flip-front;
    animation: 0.5s linear 0.9s 1 alternate forwards flip-front;
}
.tileable-image-tile:nth-child(12):after {
    -webkit-animation: 0.5s linear 0.9s 1 alternate forwards flip-back;
    animation: 0.5s linear 0.9s 1 alternate forwards flip-back;
}
.tileable-image-tile:nth-child(13):before,
.tileable-image-tile:nth-child(13):after {
    background-position: -325px -72.33333px;
}
.tileable-image-tile:nth-child(13):before {
    -webkit-animation: 0.5s linear 1s 1 alternate forwards flip-front;
    animation: 0.5s linear 1s 1 alternate forwards flip-front;
}
.tileable-image-tile:nth-child(13):after {
    -webkit-animation: 0.5s linear 1s 1 alternate forwards flip-back;
    animation: 0.5s linear 1s 1 alternate forwards flip-back;
}
.tileable-image-tile:nth-child(14):before,
.tileable-image-tile:nth-child(14):after {
    background-position: -406.25px -72.33333px;
}
.tileable-image-tile:nth-child(14):before {
    -webkit-animation: 0.5s linear 1.1s 1 alternate forwards flip-front;
    animation: 0.5s linear 1.1s 1 alternate forwards flip-front;
}
.tileable-image-tile:nth-child(14):after {
    -webkit-animation: 0.5s linear 1.1s 1 alternate forwards flip-back;
    animation: 0.5s linear 1.1s 1 alternate forwards flip-back;
}
.tileable-image-tile:nth-child(15):before,
.tileable-image-tile:nth-child(15):after {
    background-position: -487.5px -72.33333px;
}
.tileable-image-tile:nth-child(15):before {
    -webkit-animation: 0.5s linear 1.2s 1 alternate forwards flip-front;
    animation: 0.5s linear 1.2s 1 alternate forwards flip-front;
}
.tileable-image-tile:nth-child(15):after {
    -webkit-animation: 0.5s linear 1.2s 1 alternate forwards flip-back;
    animation: 0.5s linear 1.2s 1 alternate forwards flip-back;
}
.tileable-image-tile:nth-child(16):before,
.tileable-image-tile:nth-child(16):after {
    background-position: -568.75px -72.33333px;
}
.tileable-image-tile:nth-child(16):before {
    -webkit-animation: 0.5s linear 1.3s 1 alternate forwards flip-front;
    animation: 0.5s linear 1.3s 1 alternate forwards flip-front;
}
.tileable-image-tile:nth-child(16):after {
    -webkit-animation: 0.5s linear 1.3s 1 alternate forwards flip-back;
    animation: 0.5s linear 1.3s 1 alternate forwards flip-back;
}
.tileable-image-tile:nth-child(17):before,
.tileable-image-tile:nth-child(17):after {
    background-position: 0px -144.66667px;
}
.tileable-image-tile:nth-child(17):before {
    -webkit-animation: 0.5s linear 0.7s 1 alternate forwards flip-front;
    animation: 0.5s linear 0.7s 1 alternate forwards flip-front;
}
.tileable-image-tile:nth-child(17):after {
    -webkit-animation: 0.5s linear 0.7s 1 alternate forwards flip-back;
    animation: 0.5s linear 0.7s 1 alternate forwards flip-back;
}
.tileable-image-tile:nth-child(18):before,
.tileable-image-tile:nth-child(18):after {
    background-position: -81.25px -144.66667px;
}
.tileable-image-tile:nth-child(18):before {
    -webkit-animation: 0.5s linear 0.8s 1 alternate forwards flip-front;
    animation: 0.5s linear 0.8s 1 alternate forwards flip-front;
}
.tileable-image-tile:nth-child(18):after {
    -webkit-animation: 0.5s linear 0.8s 1 alternate forwards flip-back;
    animation: 0.5s linear 0.8s 1 alternate forwards flip-back;
}
.tileable-image-tile:nth-child(19):before,
.tileable-image-tile:nth-child(19):after {
    background-position: -162.5px -144.66667px;
}
.tileable-image-tile:nth-child(19):before {
    -webkit-animation: 0.5s linear 0.9s 1 alternate forwards flip-front;
    animation: 0.5s linear 0.9s 1 alternate forwards flip-front;
}
.tileable-image-tile:nth-child(19):after {
    -webkit-animation: 0.5s linear 0.9s 1 alternate forwards flip-back;
    animation: 0.5s linear 0.9s 1 alternate forwards flip-back;
}
.tileable-image-tile:nth-child(20):before,
.tileable-image-tile:nth-child(20):after {
    background-position: -243.75px -144.66667px;
}
.tileable-image-tile:nth-child(20):before {
    -webkit-animation: 0.5s linear 1s 1 alternate forwards flip-front;
    animation: 0.5s linear 1s 1 alternate forwards flip-front;
}
.tileable-image-tile:nth-child(20):after {
    -webkit-animation: 0.5s linear 1s 1 alternate forwards flip-back;
    animation: 0.5s linear 1s 1 alternate forwards flip-back;
}
.tileable-image-tile:nth-child(21):before,
.tileable-image-tile:nth-child(21):after {
    background-position: -325px -144.66667px;
}
.tileable-image-tile:nth-child(21):before {
    -webkit-animation: 0.5s linear 1.1s 1 alternate forwards flip-front;
    animation: 0.5s linear 1.1s 1 alternate forwards flip-front;
}
.tileable-image-tile:nth-child(21):after {
    -webkit-animation: 0.5s linear 1.1s 1 alternate forwards flip-back;
    animation: 0.5s linear 1.1s 1 alternate forwards flip-back;
}
.tileable-image-tile:nth-child(22):before,
.tileable-image-tile:nth-child(22):after {
    background-position: -406.25px -144.66667px;
}
.tileable-image-tile:nth-child(22):before {
    -webkit-animation: 0.5s linear 1.2s 1 alternate forwards flip-front;
    animation: 0.5s linear 1.2s 1 alternate forwards flip-front;
}
.tileable-image-tile:nth-child(22):after {
    -webkit-animation: 0.5s linear 1.2s 1 alternate forwards flip-back;
    animation: 0.5s linear 1.2s 1 alternate forwards flip-back;
}
.tileable-image-tile:nth-child(23):before,
.tileable-image-tile:nth-child(23):after {
    background-position: -487.5px -144.66667px;
}
.tileable-image-tile:nth-child(23):before {
    -webkit-animation: 0.5s linear 1.3s 1 alternate forwards flip-front;
    animation: 0.5s linear 1.3s 1 alternate forwards flip-front;
}
.tileable-image-tile:nth-child(23):after {
    -webkit-animation: 0.5s linear 1.3s 1 alternate forwards flip-back;
    animation: 0.5s linear 1.3s 1 alternate forwards flip-back;
}
.tileable-image-tile:nth-child(24):before,
.tileable-image-tile:nth-child(24):after {
    background-position: -568.75px -144.66667px;
}
.tileable-image-tile:nth-child(24):before {
    -webkit-animation: 0.5s linear 1.4s 1 alternate forwards flip-front;
    animation: 0.5s linear 1.4s 1 alternate forwards flip-front;
}
.tileable-image-tile:nth-child(24):after {
    -webkit-animation: 0.5s linear 1.4s 1 alternate forwards flip-back;
    animation: 0.5s linear 1.4s 1 alternate forwards flip-back;
}
.tileable-image-tile:nth-child(25):before,
.tileable-image-tile:nth-child(25):after {
    background-position: 0px -217px;
}
.tileable-image-tile:nth-child(25):before {
    -webkit-animation: 0.5s linear 0.8s 1 alternate forwards flip-front;
    animation: 0.5s linear 0.8s 1 alternate forwards flip-front;
}
.tileable-image-tile:nth-child(25):after {
    -webkit-animation: 0.5s linear 0.8s 1 alternate forwards flip-back;
    animation: 0.5s linear 0.8s 1 alternate forwards flip-back;
}
.tileable-image-tile:nth-child(26):before,
.tileable-image-tile:nth-child(26):after {
    background-position: -81.25px -217px;
}
.tileable-image-tile:nth-child(26):before {
    -webkit-animation: 0.5s linear 0.9s 1 alternate forwards flip-front;
    animation: 0.5s linear 0.9s 1 alternate forwards flip-front;
}
.tileable-image-tile:nth-child(26):after {
    -webkit-animation: 0.5s linear 0.9s 1 alternate forwards flip-back;
    animation: 0.5s linear 0.9s 1 alternate forwards flip-back;
}
.tileable-image-tile:nth-child(27):before,
.tileable-image-tile:nth-child(27):after {
    background-position: -162.5px -217px;
}
.tileable-image-tile:nth-child(27):before {
    -webkit-animation: 0.5s linear 1s 1 alternate forwards flip-front;
    animation: 0.5s linear 1s 1 alternate forwards flip-front;
}
.tileable-image-tile:nth-child(27):after {
    -webkit-animation: 0.5s linear 1s 1 alternate forwards flip-back;
    animation: 0.5s linear 1s 1 alternate forwards flip-back;
}
.tileable-image-tile:nth-child(28):before,
.tileable-image-tile:nth-child(28):after {
    background-position: -243.75px -217px;
}
.tileable-image-tile:nth-child(28):before {
    -webkit-animation: 0.5s linear 1.1s 1 alternate forwards flip-front;
    animation: 0.5s linear 1.1s 1 alternate forwards flip-front;
}
.tileable-image-tile:nth-child(28):after {
    -webkit-animation: 0.5s linear 1.1s 1 alternate forwards flip-back;
    animation: 0.5s linear 1.1s 1 alternate forwards flip-back;
}
.tileable-image-tile:nth-child(29):before,
.tileable-image-tile:nth-child(29):after {
    background-position: -325px -217px;
}
.tileable-image-tile:nth-child(29):before {
    -webkit-animation: 0.5s linear 1.2s 1 alternate forwards flip-front;
    animation: 0.5s linear 1.2s 1 alternate forwards flip-front;
}
.tileable-image-tile:nth-child(29):after {
    -webkit-animation: 0.5s linear 1.2s 1 alternate forwards flip-back;
    animation: 0.5s linear 1.2s 1 alternate forwards flip-back;
}
.tileable-image-tile:nth-child(30):before,
.tileable-image-tile:nth-child(30):after {
    background-position: -406.25px -217px;
}
.tileable-image-tile:nth-child(30):before {
    -webkit-animation: 0.5s linear 1.3s 1 alternate forwards flip-front;
    animation: 0.5s linear 1.3s 1 alternate forwards flip-front;
}
.tileable-image-tile:nth-child(30):after {
    -webkit-animation: 0.5s linear 1.3s 1 alternate forwards flip-back;
    animation: 0.5s linear 1.3s 1 alternate forwards flip-back;
}
.tileable-image-tile:nth-child(31):before,
.tileable-image-tile:nth-child(31):after {
    background-position: -487.5px -217px;
}
.tileable-image-tile:nth-child(31):before {
    -webkit-animation: 0.5s linear 1.4s 1 alternate forwards flip-front;
    animation: 0.5s linear 1.4s 1 alternate forwards flip-front;
}
.tileable-image-tile:nth-child(31):after {
    -webkit-animation: 0.5s linear 1.4s 1 alternate forwards flip-back;
    animation: 0.5s linear 1.4s 1 alternate forwards flip-back;
}
.tileable-image-tile:nth-child(32):before,
.tileable-image-tile:nth-child(32):after {
    background-position: -568.75px -217px;
}
.tileable-image-tile:nth-child(32):before {
    -webkit-animation: 0.5s linear 1.5s 1 alternate forwards flip-front;
    animation: 0.5s linear 1.5s 1 alternate forwards flip-front;
}
.tileable-image-tile:nth-child(32):after {
    -webkit-animation: 0.5s linear 1.5s 1 alternate forwards flip-back;
    animation: 0.5s linear 1.5s 1 alternate forwards flip-back;
}
.tileable-image-tile:nth-child(33):before,
.tileable-image-tile:nth-child(33):after {
    background-position: 0px -289.33333px;
}
.tileable-image-tile:nth-child(33):before {
    -webkit-animation: 0.5s linear 0.9s 1 alternate forwards flip-front;
    animation: 0.5s linear 0.9s 1 alternate forwards flip-front;
}
.tileable-image-tile:nth-child(33):after {
    -webkit-animation: 0.5s linear 0.9s 1 alternate forwards flip-back;
    animation: 0.5s linear 0.9s 1 alternate forwards flip-back;
}
.tileable-image-tile:nth-child(34):before,
.tileable-image-tile:nth-child(34):after {
    background-position: -81.25px -289.33333px;
}
.tileable-image-tile:nth-child(34):before {
    -webkit-animation: 0.5s linear 1s 1 alternate forwards flip-front;
    animation: 0.5s linear 1s 1 alternate forwards flip-front;
}
.tileable-image-tile:nth-child(34):after {
    -webkit-animation: 0.5s linear 1s 1 alternate forwards flip-back;
    animation: 0.5s linear 1s 1 alternate forwards flip-back;
}
.tileable-image-tile:nth-child(35):before,
.tileable-image-tile:nth-child(35):after {
    background-position: -162.5px -289.33333px;
}
.tileable-image-tile:nth-child(35):before {
    -webkit-animation: 0.5s linear 1.1s 1 alternate forwards flip-front;
    animation: 0.5s linear 1.1s 1 alternate forwards flip-front;
}
.tileable-image-tile:nth-child(35):after {
    -webkit-animation: 0.5s linear 1.1s 1 alternate forwards flip-back;
    animation: 0.5s linear 1.1s 1 alternate forwards flip-back;
}
.tileable-image-tile:nth-child(36):before,
.tileable-image-tile:nth-child(36):after {
    background-position: -243.75px -289.33333px;
}
.tileable-image-tile:nth-child(36):before {
    -webkit-animation: 0.5s linear 1.2s 1 alternate forwards flip-front;
    animation: 0.5s linear 1.2s 1 alternate forwards flip-front;
}
.tileable-image-tile:nth-child(36):after {
    -webkit-animation: 0.5s linear 1.2s 1 alternate forwards flip-back;
    animation: 0.5s linear 1.2s 1 alternate forwards flip-back;
}
.tileable-image-tile:nth-child(37):before,
.tileable-image-tile:nth-child(37):after {
    background-position: -325px -289.33333px;
}
.tileable-image-tile:nth-child(37):before {
    -webkit-animation: 0.5s linear 1.3s 1 alternate forwards flip-front;
    animation: 0.5s linear 1.3s 1 alternate forwards flip-front;
}
.tileable-image-tile:nth-child(37):after {
    -webkit-animation: 0.5s linear 1.3s 1 alternate forwards flip-back;
    animation: 0.5s linear 1.3s 1 alternate forwards flip-back;
}
.tileable-image-tile:nth-child(38):before,
.tileable-image-tile:nth-child(38):after {
    background-position: -406.25px -289.33333px;
}
.tileable-image-tile:nth-child(38):before {
    -webkit-animation: 0.5s linear 1.4s 1 alternate forwards flip-front;
    animation: 0.5s linear 1.4s 1 alternate forwards flip-front;
}
.tileable-image-tile:nth-child(38):after {
    -webkit-animation: 0.5s linear 1.4s 1 alternate forwards flip-back;
    animation: 0.5s linear 1.4s 1 alternate forwards flip-back;
}
.tileable-image-tile:nth-child(39):before,
.tileable-image-tile:nth-child(39):after {
    background-position: -487.5px -289.33333px;
}
.tileable-image-tile:nth-child(39):before {
    -webkit-animation: 0.5s linear 1.5s 1 alternate forwards flip-front;
    animation: 0.5s linear 1.5s 1 alternate forwards flip-front;
}
.tileable-image-tile:nth-child(39):after {
    -webkit-animation: 0.5s linear 1.5s 1 alternate forwards flip-back;
    animation: 0.5s linear 1.5s 1 alternate forwards flip-back;
}
.tileable-image-tile:nth-child(40):before,
.tileable-image-tile:nth-child(40):after {
    background-position: -568.75px -289.33333px;
}
.tileable-image-tile:nth-child(40):before {
    -webkit-animation: 0.5s linear 1.6s 1 alternate forwards flip-front;
    animation: 0.5s linear 1.6s 1 alternate forwards flip-front;
}
.tileable-image-tile:nth-child(40):after {
    -webkit-animation: 0.5s linear 1.6s 1 alternate forwards flip-back;
    animation: 0.5s linear 1.6s 1 alternate forwards flip-back;
}
.tileable-image-tile:nth-child(41):before,
.tileable-image-tile:nth-child(41):after {
    background-position: 0px -361.66667px;
}
.tileable-image-tile:nth-child(41):before {
    -webkit-animation: 0.5s linear 1s 1 alternate forwards flip-front;
    animation: 0.5s linear 1s 1 alternate forwards flip-front;
}
.tileable-image-tile:nth-child(41):after {
    -webkit-animation: 0.5s linear 1s 1 alternate forwards flip-back;
    animation: 0.5s linear 1s 1 alternate forwards flip-back;
}
.tileable-image-tile:nth-child(42):before,
.tileable-image-tile:nth-child(42):after {
    background-position: -81.25px -361.66667px;
}
.tileable-image-tile:nth-child(42):before {
    -webkit-animation: 0.5s linear 1.1s 1 alternate forwards flip-front;
    animation: 0.5s linear 1.1s 1 alternate forwards flip-front;
}
.tileable-image-tile:nth-child(42):after {
    -webkit-animation: 0.5s linear 1.1s 1 alternate forwards flip-back;
    animation: 0.5s linear 1.1s 1 alternate forwards flip-back;
}
.tileable-image-tile:nth-child(43):before,
.tileable-image-tile:nth-child(43):after {
    background-position: -162.5px -361.66667px;
}
.tileable-image-tile:nth-child(43):before {
    -webkit-animation: 0.5s linear 1.2s 1 alternate forwards flip-front;
    animation: 0.5s linear 1.2s 1 alternate forwards flip-front;
}
.tileable-image-tile:nth-child(43):after {
    -webkit-animation: 0.5s linear 1.2s 1 alternate forwards flip-back;
    animation: 0.5s linear 1.2s 1 alternate forwards flip-back;
}
.tileable-image-tile:nth-child(44):before,
.tileable-image-tile:nth-child(44):after {
    background-position: -243.75px -361.66667px;
}
.tileable-image-tile:nth-child(44):before {
    -webkit-animation: 0.5s linear 1.3s 1 alternate forwards flip-front;
    animation: 0.5s linear 1.3s 1 alternate forwards flip-front;
}
.tileable-image-tile:nth-child(44):after {
    -webkit-animation: 0.5s linear 1.3s 1 alternate forwards flip-back;
    animation: 0.5s linear 1.3s 1 alternate forwards flip-back;
}
.tileable-image-tile:nth-child(45):before,
.tileable-image-tile:nth-child(45):after {
    background-position: -325px -361.66667px;
}
.tileable-image-tile:nth-child(45):before {
    -webkit-animation: 0.5s linear 1.4s 1 alternate forwards flip-front;
    animation: 0.5s linear 1.4s 1 alternate forwards flip-front;
}
.tileable-image-tile:nth-child(45):after {
    -webkit-animation: 0.5s linear 1.4s 1 alternate forwards flip-back;
    animation: 0.5s linear 1.4s 1 alternate forwards flip-back;
}
.tileable-image-tile:nth-child(46):before,
.tileable-image-tile:nth-child(46):after {
    background-position: -406.25px -361.66667px;
}
.tileable-image-tile:nth-child(46):before {
    -webkit-animation: 0.5s linear 1.5s 1 alternate forwards flip-front;
    animation: 0.5s linear 1.5s 1 alternate forwards flip-front;
}
.tileable-image-tile:nth-child(46):after {
    -webkit-animation: 0.5s linear 1.5s 1 alternate forwards flip-back;
    animation: 0.5s linear 1.5s 1 alternate forwards flip-back;
}
.tileable-image-tile:nth-child(47):before,
.tileable-image-tile:nth-child(47):after {
    background-position: -487.5px -361.66667px;
}
.tileable-image-tile:nth-child(47):before {
    -webkit-animation: 0.5s linear 1.6s 1 alternate forwards flip-front;
    animation: 0.5s linear 1.6s 1 alternate forwards flip-front;
}
.tileable-image-tile:nth-child(47):after {
    -webkit-animation: 0.5s linear 1.6s 1 alternate forwards flip-back;
    animation: 0.5s linear 1.6s 1 alternate forwards flip-back;
}
.tileable-image-tile:nth-child(48):before,
.tileable-image-tile:nth-child(48):after {
    background-position: -568.75px -361.66667px;
}
.tileable-image-tile:nth-child(48):before {
    -webkit-animation: 0.5s linear 1.7s 1 alternate forwards flip-front;
    animation: 0.5s linear 1.7s 1 alternate forwards flip-front;
}
.tileable-image-tile:nth-child(48):after {
    -webkit-animation: 0.5s linear 1.7s 1 alternate forwards flip-back;
    animation: 0.5s linear 1.7s 1 alternate forwards flip-back;
}
@-webkit-keyframes flip-front {
    from {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    to {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }
}
@keyframes flip-front {
    from {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    to {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }
}
@-webkit-keyframes flip-back {
    from {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }
    to {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
}
@keyframes flip-back {
    from {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }
    to {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
}
body {
    background: #111;
}
.tileable-image {
    margin: 4% auto;
}

HTML

Image Slice Flip Ripple Transition 经典图片轮播转场动画：方块切片渐入

编辑器支持Emmet

快捷键

Image Slice Flip Ripple Transition 经典图片轮播转场动画：方块切片渐入

纯CSS实现的3D标题点击碎片化切换动画特效

使用CSS3 PerspectiveTransform实现的逼真3D地球自转动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：