CSS 3D角度转换

演示代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="reset.css"/>
        <style type="text/css">
            #box{
                width: 200px;height: 200px;background-color: #000;
                margin: 200px auto;
                perspective: 500px;
            }
            .wyzx{
                width: 200px;height: 200px;background-color: #f00;
            }
            .wyzx:hover{
                /* 元素中心点旋转 */
                /* transform: rotateZ(45deg); */
                
                /* 以下绕Z轴旋转 */
                /* 顺时针旋转 */
                /* transform: rotate(45deg); */
                /* 逆时针寻转 */
                /* transform: rotate(-45deg); */
                
                /* 旋转角度是与Y轴的夹角 */
                /* 正值元素上远离,元素下靠近；负值相反 */
                /* transform: rotateX(45deg); */
                
                /* 旋转角度是与X轴的夹角 */
                /* 正值元素左侧靠近,元素右侧远离；负值相反 */
                /* transform: rotateY(45deg); */
                
                
                /* transform: rotateX(20deg) rotateY(40deg) rotateZ(60deg); */
                transform: rotateX(20deg) rotateZ(60deg);
            }
        </style>
    </head>
    <body>
        <div id="box">
            <div class="wyzx">我要自学</div>
        </div>
    </body>
</html>