3D效果轮播图
代码
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;box-sizing: border-box;}body{perspective: 800px;transform-style: preserve-3d;}.box{display: flex;width: 250px;height: 250px;margin: 150px auto;/* overflow: hidden; 溢出隐藏和3D变化会导致子元素溢出父元素盒子的问题相冲突，会导致不同图片3D效果切换无法实现*/position: relative;transform-style: preserve-3d;transition: all 0.5s;}img{display: block;width: 250px;height: 250px;position: absolute;top: 0;left: 0;/* position: absolute; */}@keyframes ro{0%{transform:rotateX(90deg);}10%{transform:rotateY(90deg);}20%{transform:rotateY(90deg);}30%{transform:rotateZ(90deg);}40%{transform:rotateZ(90deg);}50%{transform:rotateY(90deg);}60%{transform:rotateX(90deg);}70%{transform:rotateX(180deg);}80%{transform:rotateZ(-90deg);}90%{transform:rotateY(-90deg);}100%{transform:rotateY(90deg);}}@keyframes fd{50%{transform:scale3d(1.5, 1.5, 1.5)}100%{transform:scale3d(1, 1, 1);}}.box .front{transform:translateZ(125px);}.box .back{transform:translateZ(-125px)rotateX(180deg);}.box .up{transform:translateY(-125px)rotateX(90deg);}.box .down{transform:translateY(125px)rotateX(-90deg);}.box .left{transform:translateX(-125px)rotateY(-90deg);}.box .right{transform:translate(125px)rotateY(90deg);}/* .box .back {
transform: translateZ(1250px) rotateX(180deg);
} */.box{animation: ro 9s linear infinite alternate forwards/* , fd 9s 0.2s linear backwards */;}.box:hover{animation-play-state: paused;}</style></head><body><divclass="box"><imgsrc="./image/front.jpg"alt=""class="front"><imgsrc="./image/back.jpg"alt=""class="back"><imgsrc="./image/up.jpg"alt=""class="up"><imgsrc="./image/down.jpg"alt=""class="down"><imgsrc="./image/left.jpg"alt=""class="left"><imgsrc="./image/right.jpg"alt=""class="right"></img></body></html>
效果图
本文转载自: https://blog.csdn.net/weixin_46041602/article/details/139080333
版权归原作者 森哥呢 所有， 如有侵权，请联系我们删除。
版权归原作者 森哥呢 所有， 如有侵权，请联系我们删除。