那么先来剖析，整体布局
1 首先后面粉色，该当是一张大的背景图
2 桃心旁边两边装饰，可以是版心分区图片或者背景图，这里利用的是img图片，大家利用背景图也是可以的
3 中间桃心部分，由于要做动画，最好绝对定位，中间桃心部分，右翼须要做鞭策效果，以是桃心部分该当一分为二，分为旁边两个部分
那么先来搭建构造和书写基本样式
1 构造（源码截图）：
源码：
<div class=\公众all\"大众><!--大背景盒子-->
<div class=\公众banner\"大众><!--版心盒子-->
<img class=\"大众banner_l\"大众 src=\"大众images/banner_l.png\"大众 width=\"大众495\公众 height=\公众568\公众 alt=\"大众\"大众/><!--左边装饰-->
<img class=\公众banner_r\"大众 src=\"大众images/banner_r.png\公众 width=\"大众495\"大众 height=\"大众568\"大众 alt=\"大众\"大众/><!--右边装饰-->
<div class=\公众banner_in\公众><!--桃心盒子，绝对定位-->
<img src=\公众images/left.png\"大众 width=\公众495\"大众 height=\"大众568\"大众 alt=\"大众\"大众/><!--桃心左翼-->
<img class=\公众ani\"大众 src=\"大众images/right.png\"大众 width=\"大众495\"大众 height=\"大众568\"大众 alt=\"大众\"大众/><!--桃心右翼-->
</div>
</div>
</div>
2 对应样式（源码截图）：
源码：
<style>
{padding: 0; margin: 0; list-style: none;}
.all{ height:1000px; background:url(images/bg.jpg) no-repeat top center; overflow:hidden;}/大背景/
.banner{width:1000px; height:600px; margin:100px auto; position:relative;}/版心盒子/
.banner_l{ float: left;}/左边装饰/
.banner_r{ float: right;}/右边装饰/
.banner_in{width:990px; position:absolute; left:50%; top:0; margin-left:-495px;}/桃心盒子/
.banner_in img{ float:left;}/桃心旁边边翼图片浮动水平排列，严格对齐/
</style>
基本构造样式书写完毕，现在来剖析桃心右翼动画效果:
1 首先我们要给运动的元素即桃心右翼添加动画，动画默认状态和结束状态该当同等
2 桃心右翼向前鞭策的效果，即右翼桃心沿Y轴旋转大约45度，那么可以利用css3里面的3d转换transform:rotateY(45deg); 我们可以设置动画元素50%的状态为此状态
3 这里须要把稳css3 transform转换模块，默认旋转的中央点是元素中央，桃心右翼旋转的中央点该当是元素的左边，那么我们须要添加一个css属性掌握旋转的中央点transform-origin:left;
加动画代码：
1 给动画元素加上类（源码截图）：
先给要做动画元素加上class=\公众ani\"大众，再给ani书写animation
.banner_in .ani{
animation:swing ease-in-out infinite 5s;
}
2 给动画元素ani加动画（源码截图）：
此步骤设置动画默认和结束状态旋转角度不变，旋转中央点为元素左边，中间状态沿Y轴旋转45度，代码如下
@keyframes swing{
0%,100%{transform-origin:left; transform:rotateY(0deg);}
50%{transform-origin:left; transform:rotateY(45deg);}
}
末了一步,animation和transform属性，Chrome 和 Safari需加上浏览器私有前缀-webkit-,处理兼容问题。
源码:
.banner_in .ani{
animation:swing ease-in-out infinite 5s;
-webkit-animation:swing ease-in-out infinite 5s;
}
@keyframes swing{
0%,100%{transform-origin:left; transform:rotateY(0deg);}
50%{transform-origin:left; transform:rotateY(45deg);}
}
@-webkit-keyframes swing{
0%,100%{-webkit-transform-origin:left; -webkit-transform:rotateY(0deg);}
50%{-webkit-transform-origin:left; -webkit-transform:rotateY(45deg);}
}
案例所用到的图片文件和代码，请登录：
http://bbs.520it.com/forum.php?mod=viewthread&tid=1799
