<style>
#zhong{
height:600px;
width:1350px;
position:relative;
z-index:2}
.znei{
height:60px;
width:200px;
left:550px;
top:-600px;
position:relative;
z-index:7;
text-align:center;
line-height:60px}
.znei1{
height:200px;
width:200px;
left:230px;
top:-200px;
position:absolute;
}
.znei2{
height:200px;
width:200px;
left:-100px;
top:-60px;
position:absolute;}
.znei3{
height:200px;
width:200px;
left:700px;
top:-40px;
position:absolute}
</style>
<body> <div id="zhong"><img src="28.jpg" height="600" />
<div class="znei">
<h1 style="height:35px;">系列饮品</h1>
<h4>OUR DRINKS</h4>
</div> </div>
<div id="zhong1"><img src="37.png" />
<div class="znei1"><img src="9.png" height="350" /></div>
<div class="znei2"><img src="10.png" width="250" style="transform:rotate(-45deg);ms-transform: rotate(-45deg); /* IE 9 */
-webkit-transform: rotate(-45deg); /* Safari and Chrome */
-o-transform: rotate(-45deg); /* Opera */
-moz-transform: rotate(-45deg); /* Firefox */" /></div> <div class="znei3"><img src="17.png" width="160" style="transform:rotate(45deg);ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-o-transform: rotate(45deg); /* Opera */
-moz-transform: rotate(45deg); /* Firefox */" /></div>
</div> </body>
之前有写过css中2D动画的制作，但是由于运用的不熟练，今天遇到图片倾斜的时候还是去问老师了，自己好像得了健忘症一样，现在我对遇到的图片倾斜问题以例题的形式做了一下整理：
ps: 中间的间距还是有问题的，不是很美观，还要再调整一下。