滚动时iframe不旋转

Question

我想在iframe的2个视图之间进行一些过渡，同时滚动经过它们所包含的div。显然，它不起作用，我想只在该div时旋转它。 （我对JS很陌生）

JS：

var iframe = document.getElementById("frame_1");

function updateView() {
    phone.className = "phone view_2";
}
function updateIframe() {
    iframe.src = document.getElementById("iframeURL").value;
    phone.style.width = 325 + "px";
    phone.style.height = 550 + "px";
    document.getElementById("wrapper").style.perspective = (
        document.getElementById("iframePerspective").checked ? "1000px" : "none"
    );
}
updateIframe();

$(window).scroll(function() {
    updateView();
});

CSS:
  .phone.view_1 {
    -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(-50deg);
            transform: rotateX(50deg) rotateY(0deg) rotateZ(-50deg);
    -webkit-box-shadow: -3px 3px 0 #BBB, -6px 6px 0 #BBB, -9px 9px 0 #BBB, -12px 12px 0 #BBB, -14px 10px 20px #666;
            box-shadow: -3px 3px 0 #BBB, -6px 6px 0 #BBB, -9px 9px 0 #BBB, -12px 12px 0 #BBB, -14px 10px 20px #666;
  }

  .phone.view_2 {
    -webkit-transform: rotateX(0deg) rotateY(-60deg) rotateZ(0deg);
            transform: rotateX(0deg) rotateY(-60deg) rotateZ(0deg);
    -webkit-box-shadow: 5px 1px 0 #BBB, 9px 2px 0 #BBB, 12px 3px 0 #BBB, 15px 4px 0 #BBB, 0 7px 20px #999;
            box-shadow: 5px 1px 0 #BBB, 9px 2px 0 #BBB, 12px 3px 0 #BBB, 15px 4px 0 #BBB, 0 7px 20px #999;
  }

HTML：

                    <div class="phone view_1" id="phone_1">
                        <iframe src="http://www.metzbalazs.ro" id="frame_1"></iframe>
                    </div>
                </div>```