09 Kwiecień 2023Efekt obracania się menu

Brak pomysłu na menu na stronie? Efekt nietypowej nawigacji.

Poniżej znajduje się efekt dość nietypowej nawigacji na stronie (menu podstron) polega on na tzw "odwracaniu" zawartości.
Wykonanie jest banalnie proste i wymaga jedynie kilku styli CSS oraz struktury menu w HTML. 

Kod CSS

nav ul {
  margin: 0;
  padding: 0;
  display: block;
  margin: 0 auto;
  width: 90%;
  cursor: pointer;
}
nav ul li {
  margin: 0;
  padding: 0;
  display: block;
  float: left;
  width: 33%;
  font: 17px Verdana;
}
.container {
  position: relative;
  -webkit-perspective: 800;
  -moz-perspective: 800;
  -ms-perspective: 800;
  -o-perspective: 800;
}
.card {
  width: 100%;
  height: 50px;
  position: relative;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: 0.5s;
  -moz-transform-style: preserve-3d;
  -moz-transition: 0.5s;
  -ms-transform-style: preserve-3d;
  -ms-transition: 0.5s;
  -o-transform-style: preserve-3d;
  -o-transition: 0.5s;
  transition: 0.5s;
}
.container:hover .card {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg); 
}
.face {
  position: absolute;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: white;
  line-height: 50px;
  text-align: center;
}
.front {
  background: #36C;
  z-index: 10;
}
.back {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
  background: #F60; 
}
.container:hover .front {
  z-index: 0;
}  

Kod HTML

‹nav›
‹ul›
 ‹li›‹a class="container" href="#start"›
  ‹div class="card"›
   ‹div class="face front"›Start‹/div›
   ‹div class="face back"›Kilka słów wstępu‹/div›
  ‹/div›
 ‹/a›‹/li›
 ‹li›‹a class="container" href="#oferta"›
  ‹div class="card"›
   ‹div class="face front"›Oferta‹/div›
   ‹div class="face back"›W naszej ofercie‹/div›
  ‹/div›
 ‹/a›‹/li›
 ‹li›‹a class="container" href="#galeria"›
  ‹div class="card"›
   ‹div class="face front"›Galeria‹/div›
   ‹div class="face back"›Zobacz nasze prace‹/div›
  ‹/div›
 ‹/a›‹/li›
 ‹li›‹a class="container" href="#kontakt"›
  ‹div class="card"›
   ‹div class="face front"›Kontakt‹/div›
   ‹div class="face back"›Dane teleadresowe‹/div›
  ‹/div›
 ‹/a›‹/li›
‹/ul›
‹/nav›