CSS 3D旋转例子

html中

<div id="parent">
    <div id="son">3D转换元素</div>
</div>

CSS中

#parent{
    width:400px;
    height:400px;
    border:1px solid #000;
    margin:100px auto;

    /*增加空间距离*/
    perspective:1000px;
    -webkit-perspective:1000px;
}
#son{
    width:200px;
    height:200px;
    background:red;
    margin:100px auto;
}

绕x轴(烤羊腿方向顺时针)转45度，代码如下

#son{
    transform:rotatex(45deg);
}

绕x轴，y轴，z轴旋转45度，坐标轴会变动

#son{
    transform:rotatex(45deg) rotatey(45deg) rotatez(45deg);
}

绕x轴，y轴，z轴旋转45度，注意写法不同，坐标轴不动

#son{
    transform:rotate3d(1,1,1,45deg);
}