html:
<div class="details_gray" id="teacher"> <!--名师风采、教师队伍-->
<div class="well_teacher_box1" id="well_teacher_box1">
<div 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>
</div>
<div 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>
</div>
<div 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>
</div>
<div 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>
</div>
<div 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>
</div>
<div 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>
</div>
<div 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>
</div>
<div 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>
</div>
</div>
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];
}
}
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。