CSS 图片倾斜的制作

<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: 中间的间距还是有问题的，不是很美观，还要再调整一下。