HTML+CSS旋转木马效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            body{
                background-color:black;
            }
            *{
                margin: 0;
                padding: 0;
            }
            #main img{
                width:300px;
                height: 400px;
                position: absolute;
                border:5px green double;
            }
            #main img:nth-child(1){
                transform: translateZ(500px);
            } 
            #main img:nth-child(2){
                transform: rotateY(40deg) translateZ(500px);
            }
            #main img:nth-child(3){
                transform: rotateY(80deg) translatez(500px);
            }
            #main img:nth-child(4){
                transform: rotateY(120deg) translatez(500px);
            }
            #main img:nth-child(5){
                transform: rotateY(160deg) translatez(500px);
            }
            #main img:nth-child(6){
                transform: rotateY(200deg) translatez(500px);
            }
            #main img:nth-child(7){
                transform: rotateY(240deg) translatez(500px);
            }
            #main img:nth-child(8){
                transform: rotateY(280deg) translatez(500px);
            }
            #main img:nth-child(9){
                transform: rotateY(320deg) translatez(500px);
            }
            
            /*# id选择器   id不能重复命名*/
            #main{
                margin: 100px auto;/*让父元素居中*/
                width: 300px;
                height: 400px;
                /*声明一个3D空间*/
                transform-style: preserve-3d;
                transform: rotateX(-10deg);
                animation-name: animate;
                animation-duration: 10s; /*动画执行次数*/
                animation-iteration-count: infinite; /*动画持续时间:无限 */
                animation-timing-function: linear;
                position: relative;
            }
            
            /*定义一个动画*/
            @keyframes animate {
                0%{
                    transform: rotateX(-10deg) rotateY(0deg) ;
                }
                100%{
                    transform: rotateX(-10deg) rotateY(360deg) ;
                }
            }
        </style>
    </head>
    <body>
        <div id="main">
            <img src="img/1.jpg" />
            <img src="img/2.jpg" />
            <img src="img/3.jpg" />
            <img src="img/4.jpg" />
            <img src="img/5.jpg" />
            <img src="img/6.jpg" />
            <img src="img/7.jpg" />
            <img src="img/8.jpg" />
            <img src="img/9.jpg" />
        </div>
    </body>
</html>

 

 

转载于:https://www.cnblogs.com/zmsister/p/6567785.html

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
旋转木马是一种常见的动态效果,可以通过HTMLCSS和JavaScript来实现。 下面是一个使用HTMLCSS实现的旋转木马效果的示例代码: ```html <div class="carousel"> <div class="item"><img src="image1.jpg"></div> <div class="item"><img src="image2.jpg"></div> <div class="item"><img src="image3.jpg"></div> <div class="item"><img src="image4.jpg"></div> <div class="item"><img src="image5.jpg"></div> </div> ``` ```css .carousel { position: relative; height: 300px; width: 500px; margin: 0 auto; perspective: 1000px; } .item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 1s; } .item:nth-child(1) { transform: rotateY(0deg) translateZ(250px); opacity: 1; } .item:nth-child(2) { transform: rotateY(72deg) translateZ(250px); opacity: 0.8; } .item:nth-child(3) { transform: rotateY(144deg) translateZ(250px); opacity: 0.6; } .item:nth-child(4) { transform: rotateY(216deg) translateZ(250px); opacity: 0.4; } .item:nth-child(5) { transform: rotateY(288deg) translateZ(250px); opacity: 0.2; } ``` 在上面的代码中,我们定义了一个容器 `.carousel`,其中包含了五个项目 `.item`。每个项目都包含了一个图片,通过 `transform-style: preserve-3d` 来保持3D效果,同时使用 `transition` 属性来实现平滑转换。 我们通过 `transform` 属性来定义每个项目的旋转角度和位置。其中,第一个项目是正面显示的,其余的项目则沿着 Y 轴旋转一定角度后放置在后面,通过 `translateZ` 属性来设置其远离视角的位置,以确保它们呈现出不同深度的效果。 你可以通过修改 `.item` 和其中的 `transform` 属性来调整旋转木马的样式和行为。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值