若在x,y轴rotate90度，其实是线，不显示，按近大远小的透视关系可用 perspective:数值 开启透视；
默认以中间线为旋转基线，可以用transform-origin来设置旋转基线
在z轴上的平移（translateZ）实际上，负值是越来越小，正值越来越大
<div> <img src="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); }
原文：http://www.cnblogs.com/shisanjun/p/4827534.html