html5卷轴动画制作,使用纯CSS3构建的3D卷轴动画特效

CSS

语言：

CSSSCSS

确定

.container,

.fragment-cont,

.fragment {

transform-style: preserve-3d;

-webkit-transform-style: preserve-3d;

transition: transform 0.25s;

}

body {

margin: 0;

perspective: 800px;

-webkit-perspective: 800px;

}

.container {

width: 320px;

height: 454.13333px;

margin: auto;

transform: rotateX(45deg) rotateZ(45deg);

}

.container:hover .fragment-cont {

transform: translateY(-15.13778px) translate3d(0, 2px, 5px) rotateX(-36deg);

}

.container:hover .fragment {

transform: translateY(15.13778px) rotateX(36deg);

}

.container:hover .fragment .fragment-1 {

transition-delay: 0s;

}

.container:hover .fragment .fragment-2 {

transition-delay: 0.03125s;

}

.container:hover .fragment .fragment-3 {

transition-delay: 0.0625s;

}

.container:hover .fragment .fragment-4 {

transition-delay: 0.09375s;

}

.container:hover .fragment .fragment-5 {

transition-delay: 0.125s;

}

.container:hover .fragment .fragment-6 {

transition-delay: 0.15625s;

}

.container:hover .fragment .fragment-7 {

transition-delay: 0.1875s;

}

.container:hover .fragment .fragment