若在x,y轴rotate90度,其实是线,不显示,按近大远小的透视关系可用 perspective:数值 开启透视;
默认以中间线为旋转基线,可以用transform-origin来设置旋转基线
在z轴上的平移(translateZ)实际上,负值是越来越小,正值越来越大
<div>
<img src="data:image/cat.jpg" alt=""/>
</div>
div{
width: 100px;
height: 200px;
perspective: 300px; /*开启透视*/
}
img{
/*-webkit-transform: rotateX(30deg);
-moz-transform: rotateX(30deg);
-ms-transform: rotateX(30deg);
-o-transform: rotateX(30deg);
transform: rotateX(30deg);*/
transform-origin: center bottom;
-webkit-transform: translateZ(100px);
-moz-transform: translateZ(100px);
-ms-transform: translateZ(100px);
-o-transform: translateZ(100px);
transform: translateZ(100px);
}