歡迎來到Altaba的部落格  2017年5月27日22:56:46

不多說，直接上問題程式碼

HTML部分：

<div class="photo-view box1">
        <img src="imagewall/images/full/10.jpg" alt=""/>
        <p>鴿子</p>
        <p>王陽陽畢設</p>
    </div>

    <div class="photo-view box2">
        <img src="imagewall/images/full/2.jpg" alt=""/>
        <p>院門</p>
        <p>王陽陽畢設</p>
    </div>
 

 .photo-view:hover{
            box-shadow:15px 15px 20px rgba(50, 50, 50, 0.6);
            -webkit-transform:rotate(0deg) scale(1.20);
            -moz-transform:rotate(0deg) scale(1.20);
            transform:rotate(0deg) scale(1.20);
            color: tomato;
            z-index:2;
        }

        .photo-view:nth-child(1){
            top: 0px;
            left: 50px;
            -webkit-transform: rotate(30deg);
            -moz-transform: rotate(30deg);
            transform: rotate(30deg);
        }
 

換作下面這box2重新獲取便可通過hover改變transform樣式

.photo-view:hover{
            box-shadow:15px 15px 20px rgba(50, 50, 50, 0.6);
            -webkit-transform:rotate(0deg) scale(1.20);
            -moz-transform:rotate(0deg) scale(1.20);
            transform:rotate(0deg) scale(1.20);
            color: tomato;
            z-index:2;
        }

        .photo-view:nth-child(1){
            top: 0px;
            left: 50px;
            -webkit-transform: rotate(30deg);
            -moz-transform: rotate(30deg);
            transform: rotate(30deg);
        }

        .box2{
            top: 0px;
            left: 350px;
            -webkit-transform: rotate(10deg);
            -moz-transform: rotate(10deg);
            transform: rotate(10deg);
        }
 

.photo-view:nth-child(1):hover{
            box-shadow:15px 15px 20px rgba(50, 50, 50, 0.6);
            -webkit-transform:rotate(0deg) scale(1.20);
            -moz-transform:rotate(0deg) scale(1.20);
            transform:rotate(0deg) scale(1.20);
            color: tomato;
            z-index:2;
        }

        .photo-view:nth-child(1){
            top: 0px;
            left: 50px;
            -webkit-transform: rotate(30deg);
            -moz-transform: rotate(30deg);
            transform: rotate(30deg);
        }