<div class="title">Spread Fx</div>
<div class="gallery">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
html,
body {
min-height: 100vh;
}
body {
display: flex;
align-items: center;
flex-flow: column nowrap;
overflow-x: hidden;
}
.title {
font: 1.3em/1 monospace;
font-variant: small-caps;
letter-spacing: 0.5em;
margin: 4em;
}
.gallery {
perspective: 700px;
width: 50vw;
display: flex;
justify-content: center;
align-items: center;
flex-flow: row wrap;
}
ul {
position: relative;
width: 100px;
height: 100px;
margin: 0.1em;
perspective-origin: center center;
transform-style: preserve-3d;
transform: rotateX(40deg);
transition: all 0.4s;
}
ul:hover {
transform: translateZ(100px) rotateX(20deg);
z-index: 999;
}
ul:hover li {
filter: grayscale(0);
}
li {
position: absolute;
left: 0;
top: 0;
backface-visibility: hidden;
width: 100%;
height: 100%;
transition: transform 0.3s, filter 1s;
background: coral;
filter: grayscale(0.9);
}
li:first-of-type {
transform: none;
}
li:nth-of-type(2) {
left: 100%;
transform-origin: left center;
transform: rotateY(180deg);
}
li:nth-of-type(3) {
top: 100%;
transform-origin: center top;
transform: rotateX(-180deg);
}
li:nth-of-type(4) {
left: -100%;
transform-origin: right center;
transform: rotateY(-180deg);
}
li:nth-of-type(5) {
top: -100%;
transform-origin: center bottom;
transform: rotateX(180deg);
}
li:nth-of-type(6) {
top: 100%;
left: 100%;
transform-origin: center top;
transform: rotateX(-180deg);
}
li:nth-of-type(7) {
top: 100%;
left: -100%;
transform-origin: right center;
transform: rotateY(-180deg);
}
li:nth-of-type(8) {
top: -100%;
left: -100%;
transform-origin: center bottom;
transform: rotateX(180deg);
}
li:nth-of-type(9) {
top: -100%;
left: 100%;
transform-origin: left center;
transform: rotateY(180deg);
}
/*
Setup transition-delay, for mouseout state
*/
li:nth-of-type(2),
li:nth-of-type(3),
li:nth-of-type(4),
li:nth-of-type(5) {
transition-delay: 0.03s;
}
li:nth-of-type(6),
li:nth-of-type(7),
li:nth-of-type(8),
li:nth-of-type(9) {
transition-delay: 0s;
}
ul:hover :nth-of-type(2),
ul:hover :nth-of-type(3),
ul:hover :nth-of-type(4),
ul:hover :nth-of-type(5) {
transition-delay: 0s;
}
ul:hover :nth-of-type(6),
ul:hover :nth-of-type(7),
ul:hover :nth-of-type(8),
ul:hover :nth-of-type(9) {
transition-delay: 0.2s;
}
/*
Setup planes final state
*/
ul:hover :nth-of-type(2),
ul:hover :nth-of-type(4),
ul:hover :nth-of-type(7),
ul:hover :nth-of-type(9) {
transform: rotateY(0);
}
ul:hover :nth-of-type(3),
ul:hover :nth-of-type(5),
ul:hover :nth-of-type(6),
ul:hover :nth-of-type(8) {
transform: rotateX(0);
}
/*
Set background position
*/
ul li {
background-size: 300% 300%;
}
li:nth-of-type(1) {
background-position: center center;
}
li:nth-of-type(2) {
background-position: right center;
}
li:nth-of-type(3) {
background-position: center bottom;
}
li:nth-of-type(4) {
background-position: left center;
}
li:nth-of-type(5) {
background-position: center top;
}
li:nth-of-type(6) {
background-position: right bottom;
}
li:nth-of-type(7) {
background-position: left bottom;
}
li:nth-of-type(8) {
background-position: left top;
}
li:nth-of-type(9) {
background-position: right top;
}
/*
Set background image source
*/
ul:nth-of-type(1) li {
background-image: url(//picsum.photos/1200/800?image=1011);
}
ul:nth-of-type(1) {
width: 120px;
height: 80px;
}
/* ul:nth-of-type(2) li {
background-image: url(//picsum.photos/1424/2136?image=1027);
}
ul:nth-of-type(2) {
width: 90px;
height: 130px;
} */
li {
text-indent: 999px;
overflow: hidden;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.