<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3D螺旋轮播</title> <style> *{ margin: 0; padding: 0; } /*设定容器的大小*/ .slider{ margin: 150px auto; width: 600px; height: 300px; position: relative;/*绝对定位*/ } .slider-outer{ width: 100%; height: 100%; position: relative;/*绝对定位*/ transform-style: preserve-3d; transform: rotateY(30deg) rotateX(30deg); } .slider-item{ position: absolute;/*相对定位*/ width: 100px; height: 100%; transform-style: preserve-3d; -webkit-transition: 2s; -moz-transition: 2s; -ms-transition: 2s; -o-transition: 2s; transition: 2s; } .img{ width: 100%; height: 100%; position: absolute; } .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:
Css3 3D螺旋轮播
最新推荐文章于 2024-01-22 23:43:25 发布