css如何改变图片的观察角度

g4lax's coffee hourse

    <div id="main">
        <div class="sidebar">
            <ul>
                <li><a href="">menu1</a></li>
                <li><a href="">menu2</a></li>
                <li><a href="">menu3</a></li>
                <li><a href="">menu4</a></li>
                <li><a href="">menu5</a></li>
            </ul>
        </div>


        <div class="mainbar">
            <p>coming soon</p>
            <ul>
                <li>item1</li>
                <li>item2</li>
                <li>item3</li>
                <li>item4</li>
                <li>item5</li>
                <li>item6</li>
                <li>item7</li>
                <li>item8</li>
                <li>item9</li>
                <li>item10</li>
            </ul>



            <img src="image/1.png" width="200" height="175" alt="the img is missing">
            <p>ROad 23..... </p>



        </div>
    </div>
    <div id="footer">
        <p>copyright&copy;<a href="mailto:1979171648@qq.com">1979171648@qq.com</a></p>
    </div>
</div>

```css
*{
    margin: 0;
}
body{
    color:#330000;
    font-family: Verdana;
    background-color: #ffffcc;
}
.sidebar ul{
    position: relative;
    list-style:none;
    transform: translateX(25%) translateY(25%);
}
.sidebar ul li{
    line-height: 150%;
}

.sidebar{
    background:#E8D882;
    width:23%;
    float:left;

}

#container{
    width:70%;
    position:absolute;
    left:50%;
    top:50%;
    transform: translateX(-50%) translateY(-50%);
    border: 1px solid #000;
}

#header,#footer{
    background:#ccaa66;
}
#header{
    height:100px;
    text-align: center;
    border-bottom: 1px solid #000;

}
#header h1{
    position: relative;
    top:50%;
    transform: translateY(-50%);
}

#main{
    background:#E8D882;
    overflow: hidden;
}

.mainbar p{
    position:relative;
    transform: translateX(25px) translateY(25px);
}

.mainbar ul{
    margin-top: 5%;
}

.mainbar{
    background:#f1e8b0;
    width:76%;
    float:right;
    border-left: 1px solid #000;

}

.mainbar img{
    width:30%;
    float:right;
    position: relative;
    left:-100px;
    top:-150px;
    transform: perspective(700px) rotateX(0deg) rotateY(45deg) scale3d(1, 1, 1)   //其实上就是修改perspective就可以了
}

a{
    text-decoration: none;
}

#footer{
    clear:both;
    height:50px;
    text-align: center;
    border-top: 1px solid #000;
}
#footer p{
    position: relative;
    top:50%;
    transform: translateY(-50%);
}