变形

transform:translate //平移

transform:translatex//水平

transform:translatey//垂直

transform:scale//缩放

transform:scalex/水平

transform:scalex/垂直

transform:rotate //  以中心旋转

//倾斜

 transform:skew

 transform:skewx

 transform:skewy

transform-origin:left top;  //可以设置基准点

transform-origin:0 0;//同上

下

<div id="a">
<img src="img.png">
</div>

body {
    margin: 100px;
}

#a {
    perspective: 500px;
    /*perspective-origin: top right;*/
    transform-style: preserve-3d;
}

img {
    /*transform: translate3d(100px, 100px, 300px);*/
    /*transform: translateZ(300px);*/

    /*transform: scale3d(1.5,1.5,2.5) rotateX(45deg);*/
    /*transform: scaleZ(1.5) rotateX(45deg);*/

    /*transform: rotate3d(1,1,1,120deg);*/

    /*transform: rotateX(120deg);*/
    /*transform: rotateY(45deg);*/

    /*transform: perspective(500px) rotateY(45deg);*/
    transform: rotateY(45deg);