07 - CSS3 - 照片墙旋转

---

本文是针对刚学编程的小白,都是一些基础知识,如果想了解更多深层一点的东西,欢迎移步本人博客!!

博客地址 点击跳转

---

---

< ! ---------- HTML ----------- >

<ul>
    <li>
        ![](../素材/rotateY.jpg)
    </li>
   <li>
        ![](../素材/2.jpg)
    </li>
   <li>
        ![](../素材/3.jpg)
    </li>
   <li>
        ![](../素材/4.jpg)
    </li>
</ul>

< ! --------- Style --------------- >

<style>
    *{
        margin: 0;
        padding: 0;
    }
    ul{
        height: 400px;
        border: 1px solid #000;;
        background-color: skyblue;
        margin-top: 100px;
        text-align: center;
    }
    ul li{
        display: inline-block;
        list-style: none;
        width: 150px;
        height: 200px;
        background-color: red;
        margin-top: 100px;
        transition: all 1s;
        position: relative;
        box-shadow: 0 0 10px;
    }
    ul li:nth-child(1){
        transform: rotate(30deg);
    }
    ul li:nth-child(2){
        transform: rotate(-40deg);
    }
    ul li:nth-child(3){
        transform: rotate(10deg);
    }
    ul li:nth-child(4){
        transform: rotate(45deg);
    }
    ul li img{
        width: 150px;
        height: 200px;
        box-sizing: border-box;
        border: 5px solid #fff;
    }
    ul li:hover{
        transform: none;
        transform: scale(1.3);
        z-index: 998;
    }
</style>

< ! --------- 效果展示 ---------- >

**照片墙**