<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>3D Button hover Effects</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<a href="#">
<span>Button</span>
<span></span>
<span></span>
<span>Button</span>
</a>
</body>
</html>
CSS代码如下:
body{
margin:100;
padding:100;
display:flex;
justify-content: :center;
align-items:center;
min-height:100vh;
background: #00293c;
font-family: :sans-serif;
}
a{
position:relative;
width:160px;
height:60px;
transform-style:preserve-3d;
transform:perspective(500px) rotateY(25deg);
transition:2s;
}
a:hover{
transform: perspective(500px) rotateY(385deg);
}
a span{
position:absolute;
top:0;
left:0;
display:block;
width:100%;
height:100%;
justify-content:center;
align-items:center;
font-size:24px;
letter-spacing:2px;
color:#333;
text-transform:uppercase;
box-sizing:border-box;
background:#fff;
}
a span:nth-child(1)
{
transform:translateZ(20px);
border-left:6px solid #65cbf9;
border-right:6px solid #65CBF9;
}
a span:nth-child(4){
transform:translateZ(-20px);
border-left: 6px solid #65CBF9;
border-right: 6px solid #65CBF9;
}
a span:nth-child(2),
a span:nth-child(3)
{
width:40px;
height:100%;
background: #0095d8;
}
a span:nth-child(2){
transform: rotateY(90deg) translateZ(140px);
}
a span:nth-child(3)
{
transform:rotateY(90deg) translateZ(-20px);
}
效果图如下: