css3 写不出3d效果怎么办
鼠标经过3d翻转效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
li{width:200px;list-style: none;}
a{
text-decoration: none;
display: block;
font-size: 20px;
line-height: 20px;
padding: 15px 30px 15px 31px;
color: #fff;
position: relative;
perspective: 200px; /*设置3D舞台布景,仅对子元素产生效果,数值越小，靠近屏幕低端的一侧会越长等...，建议先单独去研究一下*/
text-align: center;
}
.tD-box{
display: block;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
transition: all .3s ease-out;
transform: translateZ(-25px); /*因为li高度为50px,所以这里设置-25px,.front和.back设置为25px*/
-webkit-transform-style: preserve-3d; /*使被转换的子元素保留其 3D 转换*/
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.front{
background: #006666;
transform:rotateX(0deg) translateZ(25px); /*rotateX和translateZ位置不可调换,执行顺序会不同,效果也不同*/
}
.back{
transform:rotateX(-90deg) translateZ(25px);
}
.front,.back{
display: block;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top:0;
padding: 15px 30px 15px 31px;
-webkit-pointer-events: none; /*允许点击穿透,可自行了解*/
-moz-pointer-events: none;
-ms-pointer-events: none;
-o-pointer-events: none;
pointer-events: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.back{
background-color: #51938f;
background-size: 5px 5px;
background-position: 0 0, 30px 30px;
background-color: #aba09e;
background-image: -webkit-linear-gradient(top left, #aba09e, #818181);
background-image: -o-linear-gradient(top left, #aba09e, #818181);
background-image: linear-gradient(to bottom right, #aba09e, #818181);
}
a:hover .tD-box{
transform: translateZ(-25px) rotateX(90deg);
}
</style>
</head>
<body>
<div class="tD">
<ul>
<li><a href="">
Home
<span class="tD-box"><span class="front">Home</span><span class="back">Home</span></span>
</a></li>
</ul>
</div>
</body>
</html>
学学threejs 吧，3d随便玩，不过有些难。