旋转图片组件

一、旋转图片效果如下：

二、制作思路，核心知识点：

　　1.dom结构的规划：

　　　　

<ul class="main">
        <li>
            <div class="box">
                <img src="images/1.jpg" alt="">
                <div class="detail">
                    <h2>曝韦德愿做牺牲降薪留队 跳出合同4年5000万续约</h2>
                    <p>2010年夏天，韦德同热火签下一份为期六年价值1.08亿美元的合同，目前还剩两年到期，价值4150万。这份合同的最后两年，韦德分别拥有一个跳出条款，可以提前恢复自由身。而韦德正打算利用这一条款结束当前合同，与球队重签一份为期4年，总价值在5000万到5500万之间的新合同。...</p>
                </div>
            </div>
        </li>
        <li>
            <div class="box">
                <img src="images/2.jpg" alt="">
                <div class="detail">
                    <h2>曝韦德愿做牺牲降薪留队 跳出合同4年5000万续约</h2>
                    <p>2010年夏天，韦德同热火签下一份为期六年价值1.08亿美元的合同，目前还剩两年到期，价值4150万。这份合同的最后两年，韦德分别拥有一个跳出条款，可以提前恢复自由身。而韦德正打算利用这一条款结束当前合同，与球队重签一份为期4年，总价值在5000万到5500万之间的新合同。...</p>
                </div>
            </div>
        </li>
        <li>
            <div class="box">
                <img src="images/3.jpg" alt="">
                <div class="detail">
                    <h2>曝韦德愿做牺牲降薪留队 跳出合同4年5000万续约</h2>
                    <p>2010年夏天，韦德同热火签下一份为期六年价值1.08亿美元的合同，目前还剩两年到期，价值4150万。这份合同的最后两年，韦德分别拥有一个跳出条款，可以提前恢复自由身。而韦德正打算利用这一条款结束当前合同，与球队重签一份为期4年，总价值在5000万到5500万之间的新合同。...</p>
                </div>
            </div>
        </li>
    </ul>

解释：a.box元素：

　　上面是图片部分，下面是文字部分

 

　　2.用到旋转的过渡效果

　　　　a.为了使文字旋转180deg后，文字是正常显示的，需要将文字的初始状态旋转180deg：

　　　　　　

　　　　b.然后在鼠标hover到box元素，将box整体旋转180deg

完整css如下：

.main {
    width: 1005px;
    margin: 100px auto;
    position: relative;
}

.main li {
    list-style: none;
    width: 315px;
    height: 280px;
    display: inline-block;
    border: 5px solid white;
    box-shadow: 0 0 5px #ccc;
    overflow: hidden;
    cursor: pointer;
}

.box {
    transition: all 0.5s ease;
}

.detail {
    width: 285px;
    height: 250px;
    background: black;
    color: white;
    padding: 15px;
    transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
}

.detail h2 {
    font-size: 14px;
}

.detail p {
    font-size: 12px;
}

.box:hover {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
}

 

 

　　

 

转载于:https://www.cnblogs.com/lewis-messi/p/8989345.html