パッと見は普通のボタンですが、ホバー時にキューブ状にクルッと回転するように。
html
hover_rotate.html
<a class="button" href="#"><span>Hover</span><span>Button</span></a>
CSS
hover_rotate.css
.button {
position: relative;
-webkit-perspective: 300px;
perspective: 300px;
}
.button span {
display: block;
position: absolute;
width: 200px;
height: 60px;
border: 2px solid #333;
text-align: center;
line-height: 56px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .3s;
transition: all .3s;
pointer-events: none;
}
.button span:nth-child(1) {
background-color: #333;
color: #fff;
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
transform: rotateX(90deg);
-webkit-transform-origin: 50% 50% -30px;
-moz-transform-origin: 50% 50% -30px;
transform-origin: 50% 50% -30px;
}
.button span:nth-child(2) {
background-color: #fff;
color: #333;
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transform-origin: 50% 50% -30px;
-moz-transform-origin: 50% 50% -30px;
transform-origin: 50% 50% -30px;
}
.button:hover span:nth-child(1) {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
transform: rotateX(0deg);
z-index: 1;
}
.button:hover span:nth-child(2) {
background-color: #333;
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
transform: rotateX(-90deg);
z-index: 0;
}