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