Efecto de flujo de cubierta CSS3 3D puro

Vista prévia

Descripción

Un efecto de volteo flotante de imagen de transformación y transición CSS3 basado en 3D que replica el efecto familiar de "flujo de cobertura". Creado por < a href = "https://codepen.io/jackfilose" target = "_ blank" rel = "noopener" > jackfilose .

Funcionamiento

Cree un escaparate de imágenes con un efecto de flujo de portada 3D utilizando la lista desordenada HTML. Agregue la clase ' resaltada ' a cualquier elemento que se resaltará en la página cargada.

<ul id="menu">

<li> <a href="#">Item 1</a> </li>

<li> <a href="#">Item 2</a> </li>

<li class="highlighted"> <a href="#">Item 3</a> </li>

<li> <a href="#">Item 4</a> </li>

<li> <a href="#">Item 5</a> </li>

<li> <a href="#">Item 6</a> </li>
</ul>

El CSS principal para aplicar estilo e implementar el efecto de flujo de cubierta 3D en los elementos de lista.

ul#menu {

padding: 0;

margin: 0;

-moz-perspective: 780px;

-webkit-perspective: 780px;

perspective: 780px;

background-color: transparent;
}

ul#menu li a {

display: block;

width: 100%;

height: 100%;
}

ul#menu li {

text-indent: -9999px;

position: relative;

display: inline-block;

width: 200px;

height: 159px;

margin-right: -70px;

-moz-background-size: contain;

-webkit-background-size: contain;

background-size: contain;

background-repeat: no-repeat;

background-position: 0 0;

z-index: 50;

-moz-transform: rotateY(45deg);

-webkit-transform: rotateY(45deg);

transform: rotateY(45deg);

-moz-transition: all .45s;

-webkit-transition: all .45s;

transition: all .45s;

opacity: .8;

box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 0 30px rgba(0,0,0,0.2);
}

ul#menu li:last-child,
ul#menu li:first-child { z-index: 45; }

ul#menu li:nth-child(2),
ul#menu li:nth-child(5) { z-index: 46; }

ul#menu li:nth-child(3) { z-index: 51; }

ul#menu li.highlighted {

-moz-transform: rotateY(0deg) scale(1.2);

-webkit-transform: rotateY(0deg) scale(1.2);

transform: rotateY(0deg) scale(1.2);

z-index: 55!important;
}

ul#menu .highlighted ~ li {

-moz-transform: rotateY(-45deg);

-webkit-transform: rotateY(-45deg);

transform: rotateY(-45deg);
}

ul#menu li:hover,
ul#menu li:first-child:hover,
ul#menu li.highlighted ~ li:hover { z-index: 60!important; }

ul#menu li:hover {

-moz-transform: rotateY(0deg) scale(1.2);

-webkit-transform: rotateY(0deg) scale(1.2);

transform: rotateY(0deg) scale(1.2);

opacity: 1;
}

ul#menu li:hover ~ li {

-moz-transform: rotateY(-45deg);

-webkit-transform: rotateY(-45deg);

transform: rotateY(-45deg);
}

ul#menu:hover li:not(:hover) {

-moz-transform: rotateY(45deg);

-webkit-transform: rotateY(45deg);

transform: rotateY(45deg);
}

ul#menu:hover li:hover ~ li {

-moz-transform: rotateY(-45deg);

-webkit-transform: rotateY(-45deg);

transform: rotateY(-45deg);
}

ul#menu:not(:hover) li.highlighted { opacity: 1; }

ul#menu li:after {

content: "";

width: 200px;

height: 20px;

background: rgba(255,255,255,.5);

position: absolute;

bottom: -20px;

left: 0;

-webkit-mask-image: -webkit-gradient(linear, left 10%, left bottom, from(rgba(0,0,0,.5)), to(rgba(0,0,0,0)));
}

Agregar imágenes de fondo a los elementos de lista.

ul#menu li:nth-child(1) { background-image: url(1.jpg); }

ul#menu li:nth-child(2) { background-image: url(2.jpg); }

ul#menu li:nth-child(3) { background-image: url(3.jpg); }

ul#menu li:nth-child(4) { background-image: url(4.jpg); }

ul#menu li:nth-child(5) { background-image: url(5.jpg); }

ul#menu li:nth-child(6) { background-image: url(6.jpg); }

Eso es todo. Ajusta y modifica el CSS como quieras para crear tus propios estilos.