Cubo 3D com Css – Giro Front e Bottom

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