Use CSS to create a simple 3D effect carousel example code

I recently took a look at some features of css3d, and thought about experimenting with them and making a small demo. Just practice. Developing a rough selection Trojan effect, as shown in the figure

is actually to find the angle and position, calculate the rotation angle of each column and place it at the top position in the 3D space. Then use the animate attribute of css to let the 3D stage rotate wirelessly, and you will have a simple carousel effect. If you are interested, you can take a look. You can just change the Picture path in the code to your own picture address. Available directly.

The code is as follows:

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>

            
•                 
              
            
•                 
              
            
•                 
              
            
•                 
              
            
•                 
              
            
•                 
              
            
•                 
              
            
•                 
              
        

    

The above is the detailed content of Use CSS to create a simple 3D effect carousel example code. For more information, please follow other related articles on the PHP Chinese website!