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