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>