运用CSS3 3D转换实现案例—旋转木马

1.首先搭建HTML结构

<section>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</section>

   里面的六个div分别是想要插入的图片

   最后旋转的还是section这个标签

2.CSS样式

    1.给body添加透视效果 perspective:1000px;

    2.给section添加3d呈现效果控制里面的6个div

    3.里面的六个div全部绝对定位叠到一起,然后移动不同角度旋转和距离

              角度用rotateY,距离用translateZ来控制

     4.给section添加动画animation,即可自动旋转

body{
    /*添加透视*/
    perspective: 1000px;
}


section{
    position: relative;
    width: 300px;
    height: 200px;
    /*为子盒子开启三维立体环境*/
    transform-style: preserve-3d;
    /*谁做动画给谁加*/
    animation: play 10s linear infinite;
}
/*鼠标经过  停止旋转*/
section:hover{
    animation-play-state: paused;

}
@keyframes play{
    0%{
        transform: rotateY();
    }
    100%{
        transform: rotateY(360deg);
    }

}
section div{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('输入图片');
}
section div:nth-child(1){
    transform: translateZ(300px);
}
section div:nth-child(2){
    transform: rotateY(60deg) translateZ(300px);
}
section div:nth-child(1){
    transform: rotateY(120deg) translateZ(300px);
}
section div:nth-child(1){
    transform: rotateY(180deg) translateZ(300px);
}
section div:nth-child(1){
    transform: rotateY(240deg) translateZ(300px);
}
section div:nth-child(1){
    transform: rotateY(300deg) translateZ(300px);
}

 

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值