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-8 {
transition-delay: 0.21875s;
}
.container:hover .fragment .fragment-9 {
transition-delay: 0.25s;
}
.container:hover .fragment .fragment-10 {
transition-delay: 0.28125s;
}
.container:hover .fragment .fragment-11 {
transition-delay: 0.3125s;
}
.container:hover .fragment .fragment-12 {
transition-delay: 0.34375s;
}
.container:hover .fragment .fragment-13 {
transition-delay: 0.375s;
}
.container:hover .fragment .fragment-14 {
transition-delay: 0.40625s;
}
.container:hover .fragment .fragment-15 {
transition-delay: 0.4375s;
}
.container:hover .fragment .fragment-16 {
transition-delay: 0.46875s;
}
.container:hover .fragment .fragment-17 {
transition-delay: 0.5s;
}
.container:hover .fragment .fragment-18 {
transition-delay: 0.53125s;
}
.container:hover .fragment .fragment-19 {
transition-delay: 0.5625s;
}
.container:hover .fragment .fragment-20 {
transition-delay: 0.59375s;
}
.container:hover .fragment .fragment-21 {
transition-delay: 0.625s;
}
.container:hover .fragment .fragment-22 {
transition-delay: 0.65625s;
}
.container:hover .fragment .fragment-23 {
transition-delay: 0.6875s;
}
.container:hover .fragment .fragment-24 {
transition-delay: 0.71875s;
}
.container:hover .fragment .fragment-25 {
transition-delay: 0.75s;
}
.container:hover .fragment .fragment-26 {
transition-delay: 0.78125s;
}
.container:hover .fragment .fragment-27 {
transition-delay: 0.8125s;
}
.container:hover .fragment .fragment-28 {
transition-delay: 0.84375s;
}
.container:hover .fragment .fragment-29 {
transition-delay: 0.875s;
}
.container:hover .fragment .fragment-30 {
transition-delay: 0.90625s;
}
.fragment-cont {
transform: translateY(-15.13778px) rotateX(0deg);
}
.fragment {
background-image: url(/uploads/161001/mona.jpg);
background-size: 100.75% auto;
width: 100%;
height: 15.13778px;
transform-origin: 0% 0%;
-webkit-transform-origin: 0% 0%;
transform: translateY(15.13778px);
}
.fragment-30 {
background-position: 0 455.26867px;
transition-delay: 0s;
}
.fragment-29 {
background-position: 0 440.13089px;
transition-delay: 0.03125s;
}
.fragment-28 {
background-position: 0 424.99311px;
transition-delay: 0.0625s;
}
.fragment-27 {
background-position: 0 409.85533px;
transition-delay: 0.09375s;
}
.fragment-26 {
background-position: 0 394.71756px;
transition-delay: 0.125s;
}
.fragment-25 {
background-position: 0 379.57978px;
transition-delay: 0.15625s;
}
.fragment-24 {
background-position: 0 364.442px;
transition-delay: 0.1875s;
}
.fragment-23 {
background-position: 0 349.30422px;
transition-delay: 0.21875s;
}
.fragment-22 {
background-position: 0 334.16645px;
transition-delay: 0.25s;
}
.fragment-21 {
background-position: 0 319.02867px;
transition-delay: 0.28125s;
}
.fragment-20 {
background-position: 0 303.89089px;
transition-delay: 0.3125s;
}
.fragment-19 {
background-position: 0 288.75311px;
transition-delay: 0.34375s;
}
.fragment-18 {
background-position: 0 273.61533px;
transition-delay: 0.375s;
}
.fragment-17 {
background-position: 0 258.47756px;
transition-delay: 0.40625s;
}
.fragment-16 {
background-position: 0 243.33978px;
transition-delay: 0.4375s;
}
.fragment-15 {
background-position: 0 228.202px;
transition-delay: 0.46875s;
}
.fragment-14 {
background-position: 0 213.06422px;
transition-delay: 0.5s;
}
.fragment-13 {
background-position: 0 197.92644px;
transition-delay: 0.53125s;
}
.fragment-12 {
background-position: 0 182.78867px;
transition-delay: 0.5625s;
}
.fragment-11 {
background-position: 0 167.65089px;
transition-delay: 0.59375s;
}
.fragment-10 {
background-position: 0 152.51311px;
transition-delay: 0.625s;
}
.fragment-9 {
background-position: 0 137.37533px;
transition-delay: 0.65625s;
}
.fragment-8 {
background-position: 0 122.23756px;
transition-delay: 0.6875s;
}
.fragment-7 {
background-position: 0 107.09978px;
transition-delay: 0.71875s;
}
.fragment-6 {
background-position: 0 91.962px;
transition-delay: 0.75s;
}
.fragment-5 {
background-position: 0 76.82422px;
transition-delay: 0.78125s;
}
.fragment-4 {
background-position: 0 61.68644px;
transition-delay: 0.8125s;
}
.fragment-3 {
background-position: 0 46.54867px;
transition-delay: 0.84375s;
}
.fragment-2 {
background-position: 0 31.41089px;
transition-delay: 0.875s;
}
.fragment-1 {
background-position: 0 16.27311px;
transition-delay: 0.90625s;
}
