マウスオーバーで回転する3Dなボタン 3D button flip

3D button flip

DEMO 表示

マウスポインターを乗せるとクルッと回転して、別の側面を表示する3Dなボタンです
メニューなどで並べて表示したときに、楽しそうかなと思います

rotateを使って3D表現されています
SCSSでCSSが書かれていて、@cube-widthと@cube-heightでボタンの大きさを変えて、あとは背景とかを変えれば簡単にWEBサイトにあったカラーとサイズに変更できそうです

– CODE –

HTML

<h1>3D FLIP BUTTON</h1>

<!-- flip-to-top or flip-to-bottom -->
<div class="cube flip-to-top">
 <div class="default-state">
 <span>Hover</span>
 </div>
 <div class="active-state">
 <span>...and I flip</span>
 </div>
</div>

<a href="#" id="flipto" data-face="bottom">Flip: to bottom</a>

CSS (LESS)

@cube-width: 250px;
@cube-height: 100px;

/* CORE CSS */
body {
 .perspective(1000px);
}

/* Container box to set the sides relative to */
.cube {
 width: @cube-width;
 height: @cube-height;
 .transition(all 250ms ease);
 .transform-style(preserve-3d);
}

/* The two faces of the cube */
.default-state, .active-state {
 height: @cube-height;
}

/* Position the faces */
.default-state {
 .translateZ(@cube-height/2);
}

.flip-to-top .active-state {
 .transform(rotateX(90deg) translateZ(@cube-height*1.5));
}

.flip-to-bottom .active-state {
 .transform(rotateX(-90deg) translateZ(-50px));
}

/* Rotate the cube */
.cube.flip-to-top:hover {
 .rotateX(-89deg);
}

.cube.flip-to-bottom:hover {
 .rotateX(89deg);
}
/* END CORE CSS */


/* Demo styling */
body {
 font-family: 'Montserrat', sans-serif;
 font-weight: 400;
 margin: 70px;
 background: #f1f1f1;
}

h1 {
 font-size: 20px;
 text-align: center;
 margin-top: 40px;
}

.cube {
 text-align: center;
 margin: 0 auto;
}

.default-state, .active-state {
 background: #2ecc71;
 
 font-size: 16px;
 text-transform: uppercase;
 color: #fff;
 line-height: @cube-height;
 .transition(background 250ms ease);
}

.cube:hover .default-state {
 background: darken(#2ecc71, 7%);
}

.active-state {
 background: darken(#2ecc71, 7%);
}

#flipto {
 display: block;
 text-align: center;
 text-decoration: none;
 margin-top: 20px;
 color: #ccc;
}

JS (jQuery)

$('#flipto').on("click", function(event) {
 event.preventDefault();
 
 var face = $(this).data("face");
 
 if ( face == "bottom" ) {
 $(".cube").removeClass("flip-to-top").addClass("flip-to-bottom");
 $(this).data("face", "top").text("Flip: to top");
 } else {
 $(".cube").removeClass("flip-to-bottom").addClass("flip-to-top");
 $(this).data("face", "bottom").text("Flip: to bottom");
 }
});