Web Front-end
HTML Tutorial
CSS3 image flip switching case and analysis of important attributes
CSS3 image flip switching case and analysis of important attributes
Image flip switching, without using CSS3, generally use JS to implement animation, and simultaneously operate the width and left, or height and top of the element to simulate the flip effect, and change the src or z-index when appropriate. Picture switching.
I accidentally discovered the CSS3 solution, http://www.webhek.com/css-flip/. Learn it quickly and summarize it as follows
First upload the code (most of them are copied from the above link, there are big compatibility issues, use with caution)
HTML:
<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="flip-container"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="flipper"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="front"</span><span style="color: #0000ff;">></span>here is content : AA<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="back"</span><span style="color: #0000ff;">></span>here is content : BB<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> CSS:
<span style="color: #800000;">.flip-container </span>{<span style="color: #ff0000;">
margin</span>:<span style="color: #0000ff;"> 30px</span>;<span style="color: #ff0000;">
display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;">
border</span>:<span style="color: #0000ff;"> 1px solid #aaa</span>;<span style="color: #ff0000;">
-webkit-perspective</span>:<span style="color: #0000ff;"> 500</span>;<span style="color: #ff0000;">
-moz-perspective</span>:<span style="color: #0000ff;"> 500</span>;<span style="color: #ff0000;">
-ms-perspective</span>:<span style="color: #0000ff;"> 500</span>;<span style="color: #ff0000;">
perspective</span>:<span style="color: #0000ff;"> 500</span>;<span style="color: #ff0000;">
-ms-transform</span>:<span style="color: #0000ff;"> perspective(500px)</span>;<span style="color: #ff0000;">
-moz-transform</span>:<span style="color: #0000ff;"> perspective(500px)</span>; <span style="color: #008000;">/*</span><span style="color: #008000;">重要</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
transform-style</span>:<span style="color: #0000ff;"> preserve-3d</span>; <span style="color: #008000;">/*</span><span style="color: #008000;">重要</span><span style="color: #008000;">*/</span>
}<span style="color: #800000;">
.flipper </span>{<span style="color: #ff0000;">
position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
height</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
transition</span>:<span style="color: #0000ff;"> 0.6s</span>;<span style="color: #ff0000;">
transform-style</span>:<span style="color: #0000ff;"> preserve-3d</span>; <span style="color: #008000;">/*</span><span style="color: #008000;">重要</span><span style="color: #008000;">*/</span>
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> 触发翻转 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.flip-container:hover .flipper</span>{<span style="color: #ff0000;">
transform</span>:<span style="color: #0000ff;"> rotateY(180deg)</span>;
}<span style="color: #800000;">
.front ,.back</span>{<span style="color: #ff0000;">
position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
left</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
top</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
backface-visibility</span>:<span style="color: #0000ff;"> hidden</span>; <span style="color: #008000;">/*</span><span style="color: #008000;">重要</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
height</span>:<span style="color: #0000ff;"> 100%</span>;
}<span style="color: #800000;">
.front </span>{<span style="color: #ff0000;">
transform</span>:<span style="color: #0000ff;"> rotateY(0deg)</span>;<span style="color: #ff0000;">
z-index</span>:<span style="color: #0000ff;"> 2</span>;<span style="color: #ff0000;">
background</span>:<span style="color: #0000ff;"> red</span>;
}<span style="color: #800000;">
.back </span>{<span style="color: #ff0000;">
transform</span>:<span style="color: #0000ff;"> rotateY(-180deg)</span>;<span style="color: #ff0000;">
background</span>:<span style="color: #0000ff;"> green</span>;
}- Set the perspective attribute of the entire animation area on the outermost container element.
- When the outer container element encounters a mouseover event, the container storing the card inside rotates 180 degrees. This is also where the rotation speed is controlled. If you set the rotation value to -180deg, it is reverse rotation.
- means that the elements on the front and back of the card must be absolutely positioned so that they block each other in the same position. Their backface-visibility property is set to hidden so that the back of each card is not visible when flipped.
- Set the front of the card to a higher z-index value than the back, so that the front of the card is on top.
- Rotate the back card 180 degrees so that it plays the role of the back.
End of copying, there are important comments in CSS that require special attention.
Theperspective property defines the distance of the 3D element from the view, in pixels. The intuitive phenomenon is that the inner element will overflow the outer border when flipped. If it is not written, or the attribute value is 0, it will only change within the outer border.
And special attention needs to be paid to the attribute value to adapt to the width and height of the element that needs to be flipped. Too little will overflow and it will be exaggerated. Too much will have little difference from setting it to 0. The difference effect is shown in the picture below
transform-style: preserve-3d; The transform-style attribute specifies how to render nested elements in 3D space (copied from w3cschool).
Both flip-container and flipper need to be set. If flip-container is not set, the overflow 3D effect will be missing. If flipper is not set, after the container is flipped, we will still see the back of the front. Backface-visibility: hidden cannot reflect the effect.
What’s more annoying is that transform-style is not supported even in IE11.
So there is another solution that is compatible with IE, which is not to flip the container, but to flip the front and back at the same time. Fortunately, IE still supports backface-visibility: hidden, so the flipping effect is the same as the previous solution.
HTML is as follows:
<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="flip-container"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="front"</span><span style="color: #0000ff;">></span>here is content : AA<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="back"</span><span style="color: #0000ff;">></span>here is content : BB<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> Since the front and back are flipped directly, the flipper becomes redundant and the flipper is removed.
The CSS code is as follows (after many tests, we tried our best to support various browsers, and downgraded browsers that did not support CSS3 flip, retaining the switching effect)
<span style="color: #800000;">.flip-container </span>{<span style="color: #ff0000;">
-webkit-perspective</span>:<span style="color: #0000ff;"> 500</span>;<span style="color: #ff0000;">
-moz-perspective</span>:<span style="color: #0000ff;"> 500</span>;<span style="color: #ff0000;">
-ms-perspective</span>:<span style="color: #0000ff;"> 500</span>;<span style="color: #ff0000;">
perspective</span>:<span style="color: #0000ff;"> 500</span>;<span style="color: #ff0000;">
-ms-transform</span>:<span style="color: #0000ff;"> perspective(500px)</span>;<span style="color: #ff0000;">
-moz-transform</span>:<span style="color: #0000ff;"> perspective(500px)</span>;<span style="color: #ff0000;">
-moz-transform-style</span>:<span style="color: #0000ff;"> preserve-3d</span>;<span style="color: #ff0000;">
-ms-transform-style</span>:<span style="color: #0000ff;"> preserve-3d</span>;<span style="color: #ff0000;">
margin</span>:<span style="color: #0000ff;"> 30px</span>;<span style="color: #ff0000;">
display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;">
border</span>:<span style="color: #0000ff;"> 1px solid #aaa</span>;<span style="color: #ff0000;">
position</span>:<span style="color: #0000ff;"> relative</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;">由于内层绝对定位导致高度缺少，这里显式设置了宽高</span><span style="color: #008000;">*/</span><span style="color: #800000;">
.flip-container, .front, .back </span>{<span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
height</span>:<span style="color: #0000ff;"> 200px</span>;
}<span style="color: #800000;">
.flip-container:hover .front </span>{<span style="color: #ff0000;">
-webkit-transform</span>:<span style="color: #0000ff;"> rotateY(180deg)</span>;<span style="color: #ff0000;">
-moz-transform</span>:<span style="color: #0000ff;"> rotateY(180deg)</span>;<span style="color: #ff0000;">
-o-transform</span>:<span style="color: #0000ff;"> rotateY(180deg)</span>;<span style="color: #ff0000;">
-ms-transform</span>:<span style="color: #0000ff;"> rotateY(180deg)</span>;<span style="color: #ff0000;">
transform</span>:<span style="color: #0000ff;"> rotateY(180deg)</span>;
}<span style="color: #800000;">
.flip-container:hover .back </span>{<span style="color: #ff0000;">
-webkit-transform</span>:<span style="color: #0000ff;"> rotateY(0deg)</span>;<span style="color: #ff0000;">
-moz-transform</span>:<span style="color: #0000ff;"> rotateY(0deg)</span>;<span style="color: #ff0000;">
-o-transform</span>:<span style="color: #0000ff;"> rotateY(0deg)</span>;<span style="color: #ff0000;">
-ms-transform</span>:<span style="color: #0000ff;"> rotateY(0deg)</span>;<span style="color: #ff0000;">
transform</span>:<span style="color: #0000ff;"> rotateY(0deg)</span>;<span style="color: #ff0000;">
z-index</span>:<span style="color: #0000ff;"> 3</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> 降级处理不支持CSS3的浏览器，只是简单的将back上升盖住front </span><span style="color: #008000;">*/</span>
}<span style="color: #800000;">
.front, .back </span>{<span style="color: #ff0000;">
-webkit-backface-visibility</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">
-moz-backface-visibility</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">
-ms-backface-visibility</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">
backface-visibility</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">
-webkit-transition</span>:<span style="color: #0000ff;"> 0.6s</span>;<span style="color: #ff0000;">
-moz-transition</span>:<span style="color: #0000ff;"> 0.6s</span>;<span style="color: #ff0000;">
-o-transition</span>:<span style="color: #0000ff;"> 0.6s</span>;<span style="color: #ff0000;">
-ms-transition</span>:<span style="color: #0000ff;"> 0.6s</span>;<span style="color: #ff0000;">
transition</span>:<span style="color: #0000ff;"> 0.6s</span>;<span style="color: #ff0000;">
position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
top</span>:<span style="color: #0000ff;"> 0px</span>;<span style="color: #ff0000;">
left</span>:<span style="color: #0000ff;"> 0px</span>;
}<span style="color: #800000;">
.front </span>{<span style="color: #ff0000;">
background</span>:<span style="color: #0000ff;"> red</span>;<span style="color: #ff0000;">
z-index</span>:<span style="color: #0000ff;"> 2</span>;
}<span style="color: #800000;">
.back </span>{<span style="color: #ff0000;">
background</span>:<span style="color: #0000ff;"> green</span>;<span style="color: #ff0000;">
-webkit-transform</span>:<span style="color: #0000ff;"> rotateY(-180deg)</span>;<span style="color: #ff0000;">
-moz-transform</span>:<span style="color: #0000ff;"> rotateY(-180deg)</span>;<span style="color: #ff0000;">
-o-transform</span>:<span style="color: #0000ff;"> rotateY(-180deg)</span>;<span style="color: #ff0000;">
-ms-transform</span>:<span style="color: #0000ff;"> rotateY(-180deg)</span>;<span style="color: #ff0000;">
transform</span>:<span style="color: #0000ff;"> rotateY(-180deg)</span>;
}There may be a lot of unnecessary compatibility code in the above, and the level is limited. Welcome to exchange more concise writing methods.
There is also a little TIPS. When using hover to trigger element flipping in other situations, you should use it as follows. The parent element with fixed width and height triggers, and the child element flips
<span style="color: #800000;">.outer </span>{<span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
height</span>:<span style="color: #0000ff;"> 200px</span>;
}<span style="color: #800000;">
.inner </span>{<span style="color: #ff0000;">
transition</span>:<span style="color: #0000ff;"> 0.6s</span>;
}<span style="color: #800000;">
.outer:hover .inner</span>{<span style="color: #ff0000;">
transform</span>:<span style="color: #0000ff;"> rotateY(180deg)</span>;
}Triggering the flip directly on the element hover as follows will have a big usage problem, because during the flipping process of the element, the element area becomes smaller and the cursor is separated from the element, so the element is restored and the hover is triggered to become smaller, causing unsmoothness
<span style="color: #800000;">.inner </span>{<span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
height</span>:<span style="color: #0000ff;"> 200px</span>;<br> transition: 0.6s;
}<span style="color: #800000;">
.inner:hover</span>{<span style="color: #ff0000;">
transform</span>:<span style="color: #0000ff;"> rotateY(180deg)</span>;
}
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Is HTML easy to learn for beginners?
Apr 07, 2025 am 12:11 AM
HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.
The Roles of HTML, CSS, and JavaScript: Core Responsibilities
Apr 08, 2025 pm 07:05 PM
HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.
Understanding HTML, CSS, and JavaScript: A Beginner's Guide
Apr 12, 2025 am 12:02 AM
WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.
What is an example of a starting tag in HTML?
Apr 06, 2025 am 12:04 AM
AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.
Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors?
Apr 04, 2025 pm 11:54 PM
GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...
How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking?
Apr 05, 2025 am 06:15 AM
To achieve the effect of scattering and enlarging the surrounding images after clicking on the image, many web designs need to achieve an interactive effect: click on a certain image to make the surrounding...
HTML, CSS, and JavaScript: Essential Tools for Web Developers
Apr 09, 2025 am 12:12 AM
HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.
How to implement adaptive layout of Y-axis position in web annotation?
Apr 04, 2025 pm 11:30 PM
The Y-axis position adaptive algorithm for web annotation function This article will explore how to implement annotation functions similar to Word documents, especially how to deal with the interval between annotations...
