这是一款效果非常炫酷的HTML5和CSS3 3D立方体按钮效果。该按钮效果在鼠标滑过按钮时,按钮会3D旋转到另外一个面上,显示不同的内容。
使用方法
HTML结构
该3D立方体按钮使用如下的HTML结构:
Hover Me
Button
CSS样式
实现该3D立方体按钮效果的CSS代码如下:
figure {
width: 200px;
height: 60px;
margin: 50px auto;
cursor: pointer;
perspective: 500px;
-webkit-perspective: 500px;
}
figure div {
height: 100%;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transition: 0.25s;
-webkit-transition: 0.25s;
}
figure:hover div {
transform: rotateX(-90deg);
}
span.face {
width: 100%;
height: 100%;
position: absolute;
box-sizing: border-box;
border: 5px solid #fff;
font-family: 'Source Sans Pro',sans-serif;
line-height: 50px;
font-size: 17pt;
text-align: center;
text-transform: uppercase;
}
span.face:nth-child(1) {
color: #fff;
transform: translate3d(0, 0, 30px);
-webkit-transform: translate3d(0, 0, 30px);
}
span.face:nth-child(2) {
color: #094b2c;
background: #fff;
transform: rotateX(90deg) translate3d(0, 0, 30px);
-webkit-transform: rotateX(90deg) translate3d(0, 0, 30px);
}