Rotate picture component

1. The effect of rotating the picture is as follows:

2. Production ideas, core knowledge points:

　　1. Planning of the dom structure:

　　　　

< ul class = "main" > 
        < li > 
            < div class = "box" > 
                < img src = "images/1.jpg" alt = "" > 
                < div class = "detail" > 
                    < h2 > Make sacrifices and cut wages and stay with the team to jump out of the contract for 4 years and 50 million renewal </ h2 > 
                    < p > In the summer of 2010, Wade signed a six-year contract worth $ 108 million with the Heat, and there are currently two years left to expire , worth 41.5 million. In the last two years of this contract, Wade has a jump-out clause that allows him to resume his free agency ahead of schedule. And Wade is planning to use this clause to end the current contract and re-sign a new contract with the team for a period of 4 years with a total value of between 50 million and 55 million. ... </ p > 
                <
            > 
        </ li > 
        < li > 
            < div class ="box" > 
                < img src ="images/2.jpg" alt ="" > 
                < div class ="detail" > 
                    < h2 > Expose Wade willing to make sacrifices The salary team jumped out of the contract for 4 years and 50 million renewal </ h2 > 
                    < p > In the summer of 2010, Wade signed a six-year contract worth $ 108 million with the Heat, and there are currently two years left to expire, worth 4,150 Ten thousand. In the last two years of this contract, Wade has a jump-out clause that allows him to resume his free agency ahead of schedule. And Wade is planning to use this clause to end the current contract and re-sign a new contract with the team for a period of 4 years with a total value of between 50 million and 55 million. ... </ p > 
                </ div >
            
        li > 
        < li > 
            < div class ="box" > 
                < img src ="images/3.jpg" alt ="" > 
                < div class ="detail" > 
                    < h2 > Expose Wade willing to make sacrifices to take a pay cut and stay on the team Jump out of the contract 4-year 50 million renewal </ h2 > 
                    < p > In the summer of 2010, Wade signed a six-year contract worth $108 million with the Heat, with two years left to expire, worth 41.5 million. In the last two years of this contract, Wade has a jump-out clause that allows him to resume his free agency ahead of schedule. And Wade is planning to use this clause to end the current contract and re-sign a new contract with the team for a period of 4 years with a total value of between 50 million and 55 million. ... </ p > 
                </ div > 
            <
        
    </ul>

Explanation: a.box element:

　　Above is the picture part, below is the text part

 

　　2. Use the transition effect of rotation

　　　　a. In order for the text to be displayed normally after the text is rotated by 180deg, the initial state of the text needs to be rotated by 180deg:

　　　　　　

　　　　b. Then when the mouse hovers over the box element, rotate the box as a whole by 180deg

The complete css is as follows:

.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);
}