HTML5+CSS3 制作动画转动特效

（3）为页面添加intro_text层，该层主要存放动画的介绍信息。
<div id="intro_text">
<div style="width:300px; padding:65px 0 0 40px;">
<h2>动画介绍</h2>
<p>&nbsp;&nbsp;动画是一种小孩子喜爱的东西，很灵动。英文有：animation、cartoon、animatedcartoon。其中，比较正式的"Animation"一词源自于拉丁文字根的anima，意思为灵魂；动词animate是赋予生命，引申为使某物活起来的意思。所以animation可以解释为经由创作者的安排，使原本不具生命的东西像获得生命一般的活动...</p>
<div id="menu"><ul>
<li class="home"> <a href="">
<script language="javascript" type="text/javascript">
od_displayImage('myImg1', 'images/home', 80, 99, '', 'Variable Opacity Rules');
background-color: rgba(255, 255, 255, 0.6);
-webkit-transition: -webkit-transform 2s, opacity 2s;
-webkit-backface-visibility: hidden;}
<div class="plane eight">8</div>
<div class="plane nine">9</div>
<div class="plane ten">10</div>
<div class="plane eleven">11</div>
<div class="plane twelve">12</div>
}
（5）为页面添加动画特效，该动画放置在container1层中。
<div id="container1">
<div id="stage">
<div id="shape" class="cube backfaces">
<div class="plane one">1</div>
<div பைடு நூலகம்lass="plane two">2</div>
height: 200px;
width: 200px;
-webkit-transform-style: preserve-3d;
}
（7）为plane添加样式，该层主要用于设置动画中的过渡效果。
.plane {
position: absolute;
height: 200px;
width: 200px;
<div class="plane three">3</div>
<div class="plane four">4</div>
<div class="plane five">5</div>
<div class="plane six">6</div>
<div class="plane seven">7</div>
border: 1px solid white;
-webkit-border-radius: 12px;
-webkit-box-sizing: border-box;
text-align: center;
font-family: Times, serif;
font-size: 124pt;color: black;
</div></div>
（4）为intro_text层添加CSS样式，包括层的高度或宽度等信息。
#intro_text {
float:left;
width:416px;
height:213px;
background:url(images/paper.gif) no-repeat center;
text-align:left;
HTML5+CSS3
在本章中，用户可以使用Animations功能，为动画定义多个关键帧并指定每个关键帧中标签的属性值来实现更加复杂的动画效果。
在本练习中，将使用Animations功能，制作一个企业首页。帮助用户更好的了解Animations功能的含义和应用。
操作步骤：
（1）创建页面的页头。页头被放置在DIV层中，使用ul列表为页头添加导航条。
</div>
</div>
（6）为container1层和stage层添加样式，stage层放在container1层中。
#container1 {
margin-top:20px;
margin-left:50px;
background-color:#856674;
border:none;
border-radius:20px;
color: white;
width: 700px;
height: 380px;
-webkit-perspective: 800;
-webkit-perspective-origin: 50% 225px;
}
#shape {
position: relative;
top: 100px;
margin: 0 auto;
</script> </a> </li></ul>
</div>
（2）为页头添加CSS样式，包括导航列表ul和列表项li的样式。
#menu ul{
margin:0px;
padding:0px;
list-style:none;
}
#menu li.home a{width:80px;height:99px;float:left; margin:60px 0 0 0;}
</script> </a> </li>
<li class="contact_current"> <a href="">
<script language="javascript" type="text/javascript">
od_displayImage('myImg1', 'images/contact', 103, 79, '', 'Variable Opacity Rules');