css3 내부 맵 360도 서라운드 각도

css3로 입방체를 만드는 블로그를 자주 봤는데, 만약 시각을 입방체 안으로 끌어올릴 수 있다면 둘러싸는 시각 효과를 낼 수 있지 않을까 생각했다.
오늘 한번 해 봤는데 이 시각이 정말 그렇게 잘 맞지 않아요. 왜냐하면 기준이 정해졌을 때 누가 이렇게 놀 줄 몰랐을 거예요.
chrome에서 비정상적으로 보이고,safari에서 기본적으로 정상이지만 경심에 문제가 있습니다. 위의 그림을 자세히 살펴보면 비뚤어진 것을 발견할 수 있습니다~~~
코드 공유는 다음과 같다. 완벽한 해결 방안을 구한다. (테스트 사진은 앨범에서 다운로드할 수 있고 6장)

<!doctype html>

<html>

<head>

    <title></title>

    <meta charset='utf-8' />

    <style type="text/css">

    div{margin:0;padding:0;}

    body{-webkit-perspective: 450px;-webkit-transform-style:preserve-3d;overflow:hidden;}

        .out{height:1000px;width:1000px;margin:0 auto;position:relative;  

            -webkit-animation-name:roll;

            -webkit-transform-style:preserve-3d;

            -webkit-animation-duration:0s;

            -webkit-animation-timing-function:linear;

             -webkit-animation-iteration-count:infinite;}

        @-webkit-keyframes roll{

             from {-webkit-transform:rotatey(0deg);}

                 to {-webkit-transform:rotatey(0deg);}

            }

        .out div{height:1000px;width:1000px;-webkit-transform-style:preserve-3d;position:absolute;}

        .out div:nth-of-type(1){-webkit-transform:rotateY(0deg) translateZ(-500px);background:url(a/3.jpg) 0 0 no-repeat;background-size:1000px 1000px;}



        .out div:nth-of-type(2){-webkit-transform:rotateY(90deg) translateZ(-500px);background:url(a/2.jpg) 0 0 no-repeat;background-size:1000px 1000px;}

    

        .out div:nth-of-type(3){-webkit-transform:rotateY(180deg) translateZ(-500px);background:url(a/1.jpg) 0 0 no-repeat;background-size:1000px 1000px;}

    

        .out div:nth-of-type(4){-webkit-transform:rotateY(270deg) translateZ(-500px);background:url(a/4.jpg) 0 0 no-repeat;background-size:1000px 1000px;}

    

        .out div:nth-of-type(5){-webkit-transform:rotateX(90deg) translateZ(-500px) rotatez(180deg);background:url(a/6.jpg) 0 0 no-repeat;background-size:1000px 1000px;}

        .out div:nth-of-type(6){-webkit-transform:rotateX(-90deg) translateZ(-500px) rotatez(180deg);background:url(a/5.jpg) 0 0 no-repeat;background-size:1000px 1000px;}

    </style>

</head>

<body>

    <div class='out'>

        <div></div>

        <div></div>

        <div></div>

        <div></div>

        <div></div>

        <div></div>

    </div>

    <script src='jQuery.js'></script>

    <script type="text/javascript">

    var t1=null;

var t2=null;

var t3=null;

var t4=null;

var i=0;

var j=0;

function keydown(e){        

    if(e.keyCode=='39'){

        function a(){

            if(t1)

                clearTimeout(t1);

            i++;

            $('.out').css('-webkit-transform','rotateY('+i+'deg) '+'rotatex('+j+'deg)');

            t1=setTimeout(a,30);

        }

        a();

    }

    if(e.keyCode=='37'){

        function b(){

            if(t2)

                clearTimeout(t2);

            i--;

            $('.out').css('-webkit-transform','rotateY('+i+'deg) '+'rotatex('+j+'deg)');

            t2=setTimeout(b,30);

        }    

        b();

    }

    if(e.keyCode=='38'){

        function c(){

            if(t3)

                clearTimeout(t3);

            j++;

            $('.out').css('-webkit-transform','rotateY('+i+'deg) '+'rotatex('+j+'deg)');

            t3=setTimeout(c,30);

        }

        c();

    }

    if(e.keyCode=='40'){

        function d(){

            if(t4)

                clearTimeout(t4);

            j--;

            $('.out').css('-webkit-transform','rotateY('+i+'deg) '+'rotatex('+j+'deg)');

            t4=setTimeout(d,30);

        }

        d();

    }

}

function keyup(e){

    if(e.keyCode=='39')

        clearTimeout(t1);

    if(e.keyCode=='37')

        clearTimeout(t2);

    if(e.keyCode=='38')

        clearTimeout(t3);

    if(e.keyCode=='40')

        clearTimeout(t4);

}

document.onkeydown=keydown;

document.onkeyup=keyup;

    </script>

</body>

</html>

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

초보자를 위한 간단한 카드 호버 애니메이션

html과 css만 사용하여 만든 매우 간단한 카드 호버 애니메이션을 살펴보겠습니다. css 속성을 알고 있다면 이해할 수 있지만 완전히 초보자라면 css의 기초를 배우는 것이 좋습니다. 1단계: 마크업 즉, HTM...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

css3 내부 맵 360도 서라운드 각도

좋은 웹페이지 즐겨찾기