【案例简介】

基于css实现的3d房屋效果，可以使用按键进行移动

【案例截图】

【核心代码】

 function TurnLeft() {
        //先增加Y轴旋转角度
        rotate.rotateY -= 5;
        if (rotate.rotateY >= 360) {
            rotate.rotateY -= 360;
        }
        if (rotate.rotateY < 0) {
            rotate.rotateY += 360;
        }
        //目前已知旋转角度rotate.rotateY，圆半径1，可以求得点B的X轴和Y轴坐标（点B的意思请查看计算原理.md）
        rotate.rotate3d.z = 1 * Math.sin(getRadianFromAngle(rotate.rotateY));
        rotate.rotate3d.x = 1 * Math.cos(getRadianFromAngle(rotate.rotateY));
        setAttributes();
    }

    function TurnRight() {
        //先增加Y轴旋转角度
        rotate.rotateY += 5;
        if (rotate.rotateY >= 360) {
            rotate.rotateY -= 360;
        }
        if (rotate.rotateY < 0) {
            rotate.rotateY += 360;
        }
        //目前已知旋转角度rotate.rotateY，圆半径1，可以求得点B的X轴和Y轴坐标（点B的意思请查看计算原理.md）
        rotate.rotate3d.z = 1 * Math.sin(getRadianFromAngle(rotate.rotateY));
        rotate.rotate3d.x = 1 * Math.cos(getRadianFromAngle(rotate.rotateY));
        setAttributes();
    }

    function LookSky() {
        rotate.rotate3d.rotate += 5;
        if (rotate.rotate3d.rotate >= 360) {
            rotate.rotate3d.rotate -= 360;
        }
        if (rotate.rotate3d.rotate < 0) {
            rotate.rotate3d.rotate += 360;
        }
        setAttributes();
    }

    function LookEarth() {
        rotate.rotate3d.rotate -= 5;
        if (rotate.rotate3d.rotate >= 360) {
            rotate.rotate3d.rotate -= 360;
        }
        if (rotate.rotate3d.rotate < 0) {
            rotate.rotate3d.rotate += 360;
        }
        setAttributes();
    }