Java培训第一个月WEB前端知识：3d立体效果制作
Java培训第一个月WEB前端知识：3d立体效果制作
Java培训第一个月WEB前端知识：3d立体效果制作
用到的技术：HTML +CSS主要以CSS为主。
操作步骤：
1.首先制作一个html页面，代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 3d立体</title>
</head>
<body>
<div>
<div>
<i>上面</i>
<i>下面</i>
<i>左面</i>
<i>右面</i>
<i>前面</i>
<i>后面</i>
</div>
</div>
</body> </html>
2.利用css定位以及实现3d效果；代码如下
<style type="text/css">
*{
font-family: "微软雅黑"
}
.outer{
width: 300px;
height: 300px;
margin:50px auto;
/*border:1px solid red;*/
position: relative;
-webkit-perspective: 3000px;
perspective:3000px;
transform-style: preserve-3d;
transform: rotateX(30deg);
animation: jj 10s infinite;
}
@keyframes jj{
0%{ transform: rotateX(0deg) rotateY(0deg); }
50%{ transform: rotateX(360deg) rotateY(360deg); }
100%{ transform: rotateX(0deg) rotateY(0deg); }
}
.inner{
width: 200px;
height: 200px;
position: absolute;
top: 50%;
margin-top: -100px;
left: 50%;
margin-left: -100px;
transform-style: preserve-3d;
/*transform: rotateY(70deg) rotateX(-30deg);*/
}
.inner i{
display: inline-block;
width: 200px;
height: 200px;
background: #666666;
position: absolute;
top: 0;left: 0;
text-align: center;
line-height: 200px;
font-size: 30px;
color: #ffffff;
display: none;
}
.inner i.up{
display: block;
transform: rotateX(90deg) translateZ(100px);
}
.inner i.down{
display: block;
transform: rotateX(90deg) translateZ( -100px);
}
.inner i.zuo{
display: block;
transform: rotateY(-90deg) translateZ(100px);
}
.inner i.you{
display: block;
transform: rotateY(90deg) translateZ(100px);
}
.inner i.hou{
display: block;
transform: rotateX(180deg) translateZ(100px);
}
.inner i.qian{
display: block;
transform: rotateX(0deg) translateZ(100px);
}
</style>
版权归属：石家庄康诺网络科技有限公司
2017/7/4