javascript - css的3D旋转问题，不知道哪里问题，应该每45度停一下，结果每90度停一下
html样式
<p class="details_gray" id="teacher"> <!--名师风采、教师队伍-->
<p class="well_teacher_box1" id="well_teacher_box1">
<p class="well_teacher" id="well_teacher1"> <!--左侧名师风采总盒子1-->
<img src="img/teacher/王春红.jpg"/>
<h1>名师风采：<span>王春红</span></h1>
<p class="teacher_con">王春红，1965生， 1987年毕业于西安电子科技大学计算机工程专业，主要从事的工作与研究方向：信息检索、网络信息系统。教授，主持计算机科学与技术系教学、行政工作。
1987年毕业后一直从事教学工作，并于1992-1993学年在西北大学计算机系助教进修班学习，2002-2003年在西安交通大学计算机系访问学者进修。主讲课程有《微机原理及应用》、《程序设计基础》、《数据库原理及应用》、《数据结构》、《编译原理》等课程。在教学过程中，教学态度严谨，以育人为目的，教学效果受到师生的一致好评。在教学过程中积极培养和引导了许多优秀的青年教师。
</p>
<span><a href="#">|详细了解|</a></span>
</p>
<p class="well_teacher" id="well_teacher2"> <!--左侧名师风采总盒子2-->
<img src="img/teacher/赵润林.jpg"/>
<h1>名师风采：<span>赵润林</span></h1>
<p class="teacher_con"> 赵润林，男，1960年10月生，1983年毕业于太原理工大学，1983年-1990年工作于太原矿山机械厂从事计算机应用与开发工作，1990年-2000年工作于运城南风化工集团从事计算机应用与开发工作，2000年至今在运城学院计算机科学与技术系任教，现任计算机科学与技术系副主任，副教授。
</p>
<span><a href="#">|详细了解|</a></span>
</p>
<p class="well_teacher" id="well_teacher3"> <!--左侧名师风采总盒子3-->
<img src="img/teacher/相明科.jpg"/>
<h1>名师风采：<span>相明科</span></h1>
<p class="teacher_con">相明科，1969生，副教授， 1990年毕业于杭州电子科技大学计算机系软件专业，主要从事的工作与研究方向：网络工程。
1990年分配到中国水机现场测试中心工作，主要负责自动测量技术的研究与应用。1997年调入运城学院计算机科学与技术系从事教学工作至今。其间，于1999年-2000年在西北大学计算机系助教进修班学习。主讲课程有《计算机机组成原理》、《计算机网络原理》、《网络工程与系统集成》等课程。在教学过程中，能理论结合实践，以各种工程案例激发学生的学习兴趣；同时，以知识迁移为重点，培养学生的综合素质。数年来，教学效果学生评估中，一直名列前茅。
</p>
<span><a href="#">|详细了解|</a></span>
</p>
<p class="well_teacher" id="well_teacher4"> <!--左侧名师风采总盒子4-->
<img src="img/teacher/贺玉珍.jpg"/>
<h1>名师风采：<span>贺玉珍</span></h1>
<p class="teacher_con"> 贺玉珍，1971生， 1995年毕业于山西经济管理学院经济信息管理专业（本科），毕业后一直从事教学工作，并于2001-2004年在西安电子科技大学计算机软件与理论专业攻读硕士研究生，主要从事的工作与研究方向：数据库与分布式系统、数据挖掘。副教授，教研室主任。
主讲课程有《离散数学》、《操作系统》、《面向对象程序设计》、《JAVA语言程序设计》等课程。在教学过程中，教学态度认真，始终把教书育人作为自己的座右铭，教学效果受到师生的一致好评。
</p>
<span><a href="#">|详细了解|</a></span>
</p>
<p class="well_teacher" id="well_teacher5"> <!--左侧名师风采总盒子5-->
<img src="img/teacher/朱铭琳.jpg"/>
<h1>名师风采：<span>朱铭琳</span></h1>
<p class="teacher_con">朱铭琳，1974生， 1996年毕业于太原理工大学，主要从事的工作与研究方向：计算机应用技术、人工智能。副教授，承担计算机科学与技术系教学工作。
1996年毕业后一直从事教学工作，并于2002-2005学年在北京工业大学进修，获得硕士学位。主讲课程有《单片机原理及应用》、《数字逻辑与数字系统》、《电路与模拟电子技术》等。在教学过程中，教学态度严谨，以育人为目的，教学效果受到师生的一致好评。
</p>
<span><a href="#">|详细了解|</a></span>
</p>
<p class="well_teacher" id="well_teacher6"> <!--左侧名师风采总盒子6-->
<img src="img/teacher/戴斌.jpg"/>
<h1>名师风采：<span>戴斌</span></h1>
<p class="teacher_con"> 戴斌，1975生，主要从事的工作与研究方向：计算机应用。计算机科学与技术系教学、科研工作。 1997年7月本科毕业于太原理工大学，电机电器及控制专业，分配至铁道部永济电机厂（中国北车集团永济新时速电机电器有限责任公司），从事电传动系统的设计工作，工程师；2004年起在西安理工大学攻读硕士研究生，检测技术与自动化装置专业；2007年起在运城学院计算机系教学岗位工作，副教授。
</p>
<span><a href="#">|详细了解|</a></span>
</p>
<p class="well_teacher" id="well_teacher7"> <!--左侧名师风采总盒子7-->
<img src="img/teacher/李萍.jpg"/>
<h1>名师风采：<span>李萍</span></h1>
<p class="teacher_con">李萍，1975生， 1994年毕业于太原理工大学计算机科学与技术系，2006至2009年期间在该校计算机与软件学院取得硕士学位。主要从事的工作与研究方向：数据挖掘。
2002年以来，在运城学院主讲的课程有《计算机导论》、《程序设计基础》、《数据库原理及应用》、《数据结构》、《计算机专业英语》等课程。在教学过程中，教学态度严谨，以育人为目的，教学效果受到师生的一致好评。
</p>
<span><a href="#">|详细了解|</a></span>
</p>
<p class="well_teacher" id="well_teacher8"> <!--左侧名师风采总盒子8-->
<img src="img/teacher/王琦.jpg"/>
<h1>名师风采：<span>王琦</span></h1>
<p class="teacher_con">王琦，1978生， 2001年毕业于山西师范大学数计系，主要从事的工作与研究方向：软件构件技术、WEB数据管理。
2001年毕业后一直从事教学工作，并于2004-2007在山西大学计算机学院在职攻读硕士研究生，并取得硕士学位。主讲课程有《汇编语言程序设计》、《操作系统》、《动态网页制作》、《WEB系统开发》、《软件开发环境与工具》等课程。在教学过程中，态度严谨，以育人为目的，教学效果受到师生的一致好评。
</p>
<span><a href="#">|详细了解|</a></span>
</p>
</p>CSS样式
#teacher{
perspective: 1000px;
position: relative;
}
.well_teacher_box1{
display: block;
position: relative;
margin: 43px 580px 0 58px;
height: 250px;
transform-style: preserve-3d;
transform-origin: 0 125px -310px;
}
.well_teacher{
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
#well_teacher1{
z-index: 1;
background-color: rgb(244,244,244);
border: 1px solid black;
}
#well_teacher2{
z-index: 2;
transform-origin: 0 125px -310px;
transform: rotateX(-45deg);
background-color: rgb(244,244,244);
border: 1px solid black;
}
#well_teacher3{
z-index: 3;
transform-origin: 0 125px -310px;
transform: rotateX(-90deg);
background-color: rgb(244,244,244);
border: 1px solid black;
}
#well_teacher4{
z-index: 4;
transform-origin: 0 125px -310px;
transform: rotateX(-135deg);
background-color: rgb(244,244,244);
border: 1px solid black;
}
#well_teacher5{
z-index: 5;
transform-origin: 0 125px -310px;
transform: rotateX(-180deg);
background-color: rgb(244,244,244);
border: 1px solid black;
}
#well_teacher6{
z-index: 6;
transform-origin: 0 125px -310px;
transform: rotateX(-225deg);
background-color: rgb(244,244,244);
border: 1px solid black;
}
#well_teacher7{
z-index: 7;
transform-origin: 0 125px -310px;
transform: rotateX(-270deg);
background-color: rgb(244,244,244);
border: 1px solid black;
}
#well_teacher8{
z-index: 8;
transform-origin: 0 125px -310px;
transform: rotateX(-315deg);
background-color: rgb(244,244,244);
border: 1px solid black;
}JS代码
var box = document.getElementById('well_teacher_box1');
var angle=0;
var timeInterbox = null;
function startMove(){
angle+=1;
setCss3(box,{transform:"rotateX("+angle+"deg)"});
timeInterbox = setInterval(function(){
degMove();
},10)
}
var timebox = setTimeout(function(){
startMove();
},3000);
function degMove(){
angle+=1;
setCss3(box,{transform:"rotateX("+angle+"deg)"});
if(angle % 45 == 0){
clearInterval(timeInterbox);
var timebox = setTimeout(function(){
startMove();
},3000);
}else{
angle+=1;
setCss3(box,{transform:"rotateX("+angle+"deg)"});
}
}
function setCss3 (obj,attrObj) {
for (var i in attrObj) {
var newi=i;
if(newi.indexOf("-")>0){
var num=newi.indexOf("-");
newi=newi.replace(newi.substr(num,2),newi.substr(num+1,1).toUpperCase());
}
obj.style[newi]=attrObj[i];
newi=newi.replace(newi.charAt(0),newi.charAt(0).toUpperCase());
obj.style["webkit"+newi]=attrObj[i];
obj.style["moz"+newi]=attrObj[i];
obj.style["o"+newi]=attrObj[i];
obj.style["ms"+newi]=attrObj[i];
}
}
