/*transform属性*/ transform: none|transform-functions; /*3D调整*/ transform: rotateX(30deg) rotateY(50deg) rotateZ(10deg);
通过上面的代码,大家可以使用rotateX、rotateY、rotateZ调整X、Y、Z轴的旋转角度。同时,也可以使用translateX、translateY、translateZ控制X、Y、Z轴的位置移动。
/*3D平移*/ transform: translateX(20px) translateY(30px) translateZ(10px);
除了以上的属性,CSS3还可以使用perspective属性,定义观察者的距离,以产生3D效果。同样,大家可以用rotateX、rotateY、rotateZ调整观察者所在位置的角度。
/*3D透视*/ perspective: 500px; /*调整视角*/ transform: rotateX(30deg) rotateY(50deg) rotateZ(10deg);
最后,需要注意的是,CSS3的3D调整角度对于不同的浏览器支持程度不一,需要在使用时谨慎考虑兼容性问题。