<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>8.2 3D 螺旋轮播</title> <style> *{ margin: 0; padding: 0; } .slider{ width: 600px; height: 300px; /*border: 1px red solid;*/ margin: 150px auto; position: relative; } /*.slider-outer{*/ /*-webkit-transform-style: preserve-3d;*/ /*-moz-transform-style: preserve-3d;*/ /*-ms-transform-style: preserve-3d;*/ /*transform-style: preserve-3d;*/ /*transform: rotateY(30deg) rotateX(30deg);*/ /*}*/ .slider-outer,.slider-items , .img{ height: 100%; width: 100%; position: absolute; } .slider-items{ -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; transition: 2s; width: 100px; } .img:nth-child(1){ background-image: url("images/1-1.jpg"); transform: rotateX(0deg) translateZ(150px); } .img:nth-child(2){ background-image: url("images/1-2.jpg"); transform: rotateX(90deg) translateZ(150px); } .img:nth-child(3){ background-image: url("images/1-3.jpg"); transform: rotateX(180deg) translateZ(150px); } .img:
Css3 3D 平面螺旋轮播
最新推荐文章于 2021-06-10 14:14:16 发布
这是一个使用CSS3实现的3D螺旋图像轮播效果。通过设置`transform-style: preserve-3d`,并利用旋转和位移属性创建3D变换。页面包含多个图片层,每层图片通过不同的`rotateX`角度和`translateZ`距离形成螺旋布局。点击左右箭头按钮可以实现3D旋转切换效果。
摘要由CSDN通过智能技术生成