day5 css总结

css实现轮播图

展示三种写过的轮播图

• 2d轮播图
  百度到的就不放代码了
  

• 3d轮播图
  

<style>
    body {
        perspective: 1000px;
    }
    section {
        width: 300px;
        height: 200px;
        margin: 100px auto;
        background: url(images/item1.png) no-repeat;
        position: relative;
        transform-style: preserve-3d;  /* 让父盒子里面的子盒子以3d效果显示 */
        transition:  5s linear; 
    }
    section:hover {
        transform: rotateY(360deg);
    }
    section div {
        width: 100%;
        height: 100%;
        background: url(images/Photo2.png) no-repeat;
        background-size: cover;
        position: absolute;
        top: 0;
        left: 0;
    }
    section div:nth-child(1)