CSS를 사용하여 간단한 3D 효과 캐러셀 예제 코드 만들기-CSS 튜토리얼-php.cn

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

高洛峰

풀어 주다： 2017-03-16 11:24:36

원래의

2065명이 탐색했습니다.

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

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

그림과 같이 실제로 각도와 위치를 찾아 각 열의 회전 각도를 계산하여 최상위 위치에 배치하는 것입니다. 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>

로그인 후 복사