Petit menu en cube 3D

Bonsoir
voici la réalisation d'un petit cube en 3D qui est en faite une balise <nav>
(ya pas toutes les faces )

chaque face du cube est une balise <a> avec une petite icône

lors du survole de la face celle-ci se détache légèrement et fait ainsi apparaitre de façon animé le signe plus (pour pousser l'utilisateur à cliquer on va dire )

le cube est également responsive: j ai associé la fonction magique en css "clamp" que j 'ai seulement mi dans le font-size de l’élément parent (nav) car javais exprimé toutes les valeurs en em

lien video

@vzytoi : un exemple trouvé en ligne que j'ai adapté pour toi :

<div class="wrapper">
  <div class="cube">
    <b class="front">front</b>
    <b class="back">back</b>
    <b class="top">top</b>
    <b class="bottom">bottom</b>
    <b class="left">left</b>
    <b class="right">right</b>
  </div>
</div>

body{
  background-color:#333;
}

/* keyframes for rotating animation */
@-webkit-keyframes spin {
  from { transform: rotateY(0); }
  to   { transform: rotateY(360deg); }
}

/* scene wrapper */
.wrapper{
  height: 300px;
  margin-top:50px;
  position:relative;
  perspective: 800;
  perspective-origin: 50% 100px;
}

/* cube wrapper */
.cube{
  position: relative;
  margin: 0 auto;
  width: 200px;
  transform-style: preserve-3d;
  animation: spin 4s infinite linear;
  transition: all 1s linear;
}

/* outer cube */
b{
  position:absolute;
  width:200px;
  height:200px;
  display:block;
  background:#aaa;
  border:1px solid #000;
  font-size:20px;
  text-align:center;
  line-height:200px;
  color:rgba(0,0,0,0.5);
  font-family:sans-serif;
  text-transform:uppercase;
  transition: all 1s linear;
}
b.back{
  transform: translateZ(-100px) rotateY(180deg);
}
b.right{
  transform:rotateY(-270deg) translateX(100px);
  transform-origin: top right;
}
b.left{
  transform:rotateY(270deg) translateX(-100px);
  transform-origin: center left;
}
b.top{
  transform:rotateX(-90deg) translateY(-100px);
  transform-origin: top center;
}
b.bottom{
  transform:rotateX(90deg) translateY(100px);
  transform-origin: bottom center;
}
b.front{
  transform: translateZ(100px);
}

/* hover transformations */
.cube:hover{
  top:150px;
}
.cube:hover b.top{
  transform: translateZ(100px) rotateX(-210deg);
  transform-origin: top center;
}
.cube:hover i{
  top:-200px;
}

Tu peux modifier la keyframe pour faire des pauses dans l'animation.
Modifié par Olivier C (03 Nov 2020 - 13:15)