Shulou(Shulou.com)06/02 Report--

This "css how to achieve the effect of flipping the picture" article, the article sample code is introduced in great detail, with a certain reference value, interested friends must refer to, for the "css how to flip the effect of the picture", Xiaobian sorted out the following knowledge points, please follow the pace of the editor step by step slowly understand, then let us enter the topic.

The main technology used is not only 3D flipping and positioning, but also a new attribute backface-visibility:visable | hidden.

This attribute is mainly used to set whether the back of the element is visible.

The specific steps are as follows:

1. Write out the body of the page

2. Make the two pictures superimposed by positioning

Divimg {

Width:250px

Height:170px

Position:absolute

Top:0

Left:0

Transition:all1s

}

3. Set the back of the first picture to be invisible

Divimg:first-child {

Z-index:1

Backface-visibility:hidden

}

4. Add 180 degrees of rotation

Div:hoverimg {

Transform:rotateY (180deg)

}

Finally, the complete code is given.

Document

/ * backface-visibility*/

Div {

Width:250px

Height:170px

Margin:100pxauto

Position:relative

}

Divimg {

Width:250px

Height:170px

Position:absolute

Top:0

Left:0

Transition:all1s

}

Divimg:first-child {

Z-index:1

Backface-visibility:hidden

}

Div:hoverimg {

Transform:rotateY (180deg)

}

What is csscss is a computer language used to express file styles such as HTML or XML. It is mainly used to design the style of the web page and make the web page more beautiful. It is also a language that defines style structures such as fonts, colors, locations, etc., and css styles can be stored directly in HTML pages or separate style sheet files, while the priority of style rules is determined by css according to this hierarchical structure, so as to achieve cascading effect. Up to now, css can not only decorate the web page, but also cooperate with various scripts to format the web page.

The above is all the content of the article "how to flip the picture in css". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.