Cubo 3D com Css – Giro Front e Bottom
Postado: 21 de dezembro de 2021
Tempo de Leitura: 2 Minutos
Cubo 3D com Css – Giro Front e Bottom
Neste tutorial vamos fazer um cubo 3D com css com giro Front e Bottom quando passamos o mouse sobre ele.
Vamos Adicionar o Html:
<div class="cubo-rotate-wrap"> <div class="cubo cubo-rotate cubo-rotate-bottom"> <div class="front"> <h2 class="title-cubo">Css3</h2> <p class="texto-cubo">Códigos Prontos</p> </div> <div class="back"> <h2 class="title-cubo"></h2> </div> <div class="top"> <h2 class="title-cubo"></h2> </div> <div class="bottom"> <h2 class="title-cubo">Veja mais</h2> <a href="#" target="_blank" class="link-cubo">Clique</a> </div> <div class="left"> <h2 class="title-cubo"></h2> </div> <div class="right"> <h2 class="title-cubo"></h2> </div> </div><!--Cubo Rotate Bottom --> </div><!--cubo-rotate-wrap-->
Vamos Adicionar o Css:
/*CUBO 3D*/ .title-cubo { margin-top:30px; color:#fff; font-size:2em; font-family: 'open_sansbold'; } .texto-cubo { margin-top:10px; color:#fff; font-size:1em; font-family: 'open_sansregular'; } .link-cubo { margin-top:30px; color:#fcff00; font-size:1em; font-family: 'open_sansbold'; text-decoration:none; } .link-cubo:hover { text-decoration:underline; } .wrap:after { content: ""; display: block; clear: both; } .cubo-rotate-wrap { float: none; margin: 0 30px 30px 0; perspective: 1000px; display: inline-flex; } .cubo, .cubo > div { width: 200px; height: 200px; } .cubo-rotate { position: relative; transition: all 0.8s ease; transform-style: preserve-3d; transform: translate3d(0, 0, -100px); float:left; } .cubo-rotate > div { position: absolute; top: 0; left: 0; z-index: 1; background: #fff; padding: 20px; overflow: auto; } .cubo-rotate img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .cubo-rotate .front { background: #3f77f7; z-index: 2; transform: rotate3d(0, 1, 0, 0deg) translate3d(0, 0, 100px); } .cubo-rotate .back { background: orange; transform: rotate3d(0, 1, 0, 180deg) rotate(180deg) translate3d(0, 0, 100px); } .cubo-rotate .top { background: #282828; color:#ff6c00; height: 200px; transform: rotate3d(1, 0, 0, 90deg) translate3d(0, 0, 100px); } .cubo-rotate .bottom { background: #1e3d84; height: 200px; transform: rotate3d(1, 0, 0, -90deg) translate3d(0, 0, 100px); } .cubo-rotate .left { background: yellow; transform: rotate3d(0, 1, 0, -90deg) translate3d(0, 0, 100px); } .cubo-rotate .right { background: green; transform: rotate3d(0, 1, 0, 90deg) translate3d(0, 0, 100px); } .cubo-rotate-bottom:hover { transform: translate3d(0, 0, -100px) rotate3d(1, 0, 0, 90deg); } /*CUBO 3D*/
Veja o Resultado !
Baixar Código Veja Funcionando
Publicado por: Loop Nerd
410 Visualizações
Deixe um comentário