CSS를 사용하여 간단한 3D 효과 캐러셀 예제 코드 만들기

최근 CSS3D의 일부 기능을 살펴보고 이를 실험하고 작은 데모를 만들어볼까 생각했습니다. 잠시만 연습해보세요. 대략적인 선택 트로이 효과를 개발하는 것은

그림과 같이 실제로 각도와 위치를 찾아 각 열의 회전 각도를 계산하여 최상위 위치에 배치하는 것입니다. 3D 공간에서. 그런 다음 CSS의 animate 속성을 사용하여 3D 스테이지를 무선으로 회전시키면 간단한 회전목마 효과가 나타납니다. 관심이 있으시면 코드의 이미지 경로를 자신의 이미지 주소로 변경하시면 됩니다. 직접 이용 가능합니다.

코드는 다음과 같습니다.

nbsp;html>
    <meta>
    <title></title>
    <style>
        .box{
            width:800px;
            height: 600px;
            margin:0px auto;
        }
        .box .stage{
            perspective:0px;
            perspective-origin: center center;
        }
        .box .stage .container{
            transform-style: preserve-3d;

        }
        .box ul,.box li{
            list-style: none;
            margin:0px;
            padding:0px;
            text-align: center;
            font-weight: bold;
        }
        .box ul{
            margin-left:200px;
            width:400px;
            height:400px;
        }
        .box li{
            position: absolute;
            margin-left:200px;
            width:10px;
            height:300px;
            background: blue;
            color:red;
            transform-origin: 5px top;
        }

        .box li> .horse{
            width:100px;
            height:100px;
            position: absolute;
            top:298px;
            left:-55px;
            border-radius: 50px;
            background-image: url("horse.jpg");
            background-size: contain;
        }

        .box ul{
            animation: run 20s linear infinite;
        }

        @-webkit-keyframes run {
            0%{
                transform: rotateY(0deg);
            }
            100%{
                transform: rotateY(360deg);
            }
        }

        @-webkit-keyframes horserun {
            0%{
                transform: translateY(0px);
            }
            100%{
                transform: translateY(50px);
            }
        }    </style>
    <script></script>
    <script>

        $(function(){            var len=$(".container>li").length;
            $(".container>li").each(function(e){                var index=$(".container>li").index(this)+1;
                $(this).css({                   "transform":"rotateY("+360/len * index+"deg) skew(60deg)"                });

            });
        })    </script><p>
    </p><p>
        </p>

            
•                 
              
            
•                 
              
            
•                 
              
            
•                 
              
            
•                 
              
            
•                 
              
            
•                 
              
            
•                 
              
        

    

위 내용은 CSS를 사용하여 간단한 3D 효과 캐러셀 예제 코드 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!