-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcss-flip.html
More file actions
53 lines (53 loc) · 15.5 KB
/
css-flip.html
File metadata and controls
53 lines (53 loc) · 15.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!doctype html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><title>Css Flip - Frank Wang's Coding World</title><meta name=renderer content="webkit"><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1"><meta http-equiv=Cache-Control content="no-transform"><meta http-equiv=Cache-Control content="no-siteapp"><meta name=theme-color content="#f8f5ec"><meta name=msapplication-navbutton-color content="#f8f5ec"><meta name=apple-mobile-web-app-capable content="yes"><meta name=apple-mobile-web-app-status-bar-style content="#f8f5ec"><meta name=author content><meta name=description content="How to achieve image flipping effect with CSS, how to achieve page flipping effect with CSS, CSS3, transform,"><meta name=keywords content="CSS3,transform,Image flip,Page flip effect,rotateY"><meta name=generator content="Hugo 0.157.0 with theme even"><link rel=canonical href=http://frankwang0909.github.io/css-flip.html><link rel=apple-touch-icon sizes=180x180 href=/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/favicon-16x16.png><link rel=manifest href=/manifest.json><link rel=mask-icon href=/safari-pinned-tab.svg color=#5bbad5><link href=/sass/main.min.af7fd1da18d66c2b017df5b4cae508ef44cfcac3fb4c7c7a327fe4f4f9e28b08.css rel=stylesheet><link href=/lib/fancybox/jquery.fancybox-3.1.20.min.css rel=stylesheet><meta property="og:url" content="http://frankwang0909.github.io/css-flip.html"><meta property="og:site_name" content="Frank Wang's Coding World"><meta property="og:title" content="Css Flip"><meta property="og:description" content="How to achieve image flipping effect with CSS, how to achieve page flipping effect with CSS, CSS3, transform,"><meta property="og:locale" content="en_US"><meta property="og:type" content="article"><meta property="article:section" content="post"><meta property="article:published_time" content="2017-04-29T21:24:00+08:00"><meta property="article:modified_time" content="2017-04-29T21:24:00+08:00"><meta property="article:tag" content="CSS"><meta itemprop=name content="Css Flip"><meta itemprop=description content="How to achieve image flipping effect with CSS, how to achieve page flipping effect with CSS, CSS3, transform,"><meta itemprop=datePublished content="2017-04-29T21:24:00+08:00"><meta itemprop=dateModified content="2017-04-29T21:24:00+08:00"><meta itemprop=wordCount content="385"><meta itemprop=keywords content="CSS3,transform,Image flip,Page flip effect,rotateY"><meta name=twitter:card content="summary"><meta name=twitter:title content="Css Flip"><meta name=twitter:description content="How to achieve image flipping effect with CSS, how to achieve page flipping effect with CSS, CSS3, transform,"><!--[if lte IE 9]><script src=https://cdnjs.cloudflare.com/ajax/libs/classlist/1.1.20170427/classList.min.js></script><![endif]--><!--[if lt IE 9]><script src=https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js></script><script src=https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js></script><![endif]--></head><body><div id=mobile-navbar class=mobile-navbar><div class=mobile-header-logo><a href=/en/ class=logo>Frank Wang’s Coding World</a></div><div class=mobile-navbar-icon><span></span>
<span></span>
<span></span></div></div><nav id=mobile-menu class="mobile-menu slideout-menu"><ul class=mobile-menu-list><a href=/en/><li class=mobile-menu-item>Home</li></a><a href=/en/post/><li class=mobile-menu-item>Archives</li></a><a href=/en/tags/><li class=mobile-menu-item>Tags</li></a><a href=/en/categories/><li class=mobile-menu-item>Categories</li></a><a href=/><li class=mobile-menu-item>中文</li></a></ul></nav><div class=container id=mobile-panel><header id=header class=header><div class=logo-wrapper><a href=/en/ class=logo>Frank Wang’s Coding World</a></div><nav class=site-navbar><ul id=menu class=menu><li class=menu-item><a class=menu-item-link href=/en/>Home</a></li><li class=menu-item><a class=menu-item-link href=/en/post/>Archives</a></li><li class=menu-item><a class=menu-item-link href=/en/tags/>Tags</a></li><li class=menu-item><a class=menu-item-link href=/en/categories/>Categories</a></li><li class=menu-item><a class=menu-item-link href=/>中文</a></li></ul></nav></header><main id=main class=main><div class=content-wrapper><div id=content class=content><article class=post><header class=post-header><h1 class=post-title>Css Flip</h1><div class=post-meta><span class=post-time>2017-04-29</span><div class=post-category><a href=/en/categories/frontend/>frontend</a></div><span class=more-meta>385 words </span><span class=more-meta>2 mins read</span></div></header><div class=post-toc id=post-toc><h2 class=post-toc-title>Contents</h2><div class="post-toc-content always-active"><nav id=TableOfContents><ul><li><a href=#use-css-to-achieve-animation-effects-of-page-or-image-flipping>Use CSS to achieve animation effects of page or image flipping</a></li><li><a href=#sample-code>Sample code</a></li><li><a href=#explanation-of-key-technical-points>Explanation of key technical points:</a><ul><li><a href=#1transform-deformation>1.transform: deformation</a></li><li><a href=#2transform-style-specify-the-space-where-the-child-elements-of-this-element-are-located>2.transform-style: Specify the space where the child elements of this element are located.</a></li><li><a href=#3backface-visibility-specifies-whether-the-element-is-visible-when-rotated-to-the-back>3.backface-visibility specifies whether the element is visible when rotated to the back.</a></li><li><a href=#4transition-duration-indicates-the-time-it-takes-to-complete-the-transition-effect>4.transition-duration: Indicates the time it takes to complete the transition effect.</a></li><li><a href=#5positionabsolute-absolute-positioning>5.position:absolute: absolute positioning.</a></li></ul></li></ul></nav></div></div><div class=post-content><h2 id=use-css-to-achieve-animation-effects-of-page-or-image-flipping>Use CSS to achieve animation effects of page or image flipping</h2><p>There are often animation interactive effects in web development. In the past, we could only use JavaScript to achieve it. As browsers support the new features of CSS3 better and better, many special effects can be achieved through CSS code.</p><p>When we browse the website, we can often see the animation effect of the picture flipping, such as shown in <code>Demo 1</code>.</p><p>Can this flip animation effect be achieved using pure CSS? The answer is yes.</p><p>We know that the <code>transform</code> property of CSS3 is very powerful and can achieve 2D or 3D rotation, scaling, movement or tilt.</p><p>The above Demo1 is a 3D flip along the Y axis. We can think of using the <code>rotateY()</code> method of the <code>transform</code> attribute to achieve this.</p><h2 id=sample-code>Sample code</h2><p>HTML code</p><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-html data-lang=html><span style=display:flex><span><<span style=color:#f92672>div</span> <span style=color:#a6e22e>class</span><span style=color:#f92672>=</span><span style=color:#e6db74>"rotate-container"</span>>
</span></span><span style=display:flex><span> <<span style=color:#f92672>div</span> <span style=color:#a6e22e>class</span><span style=color:#f92672>=</span><span style=color:#e6db74>"flipper"</span>>
</span></span><span style=display:flex><span> <<span style=color:#f92672>div</span> <span style=color:#a6e22e>class</span><span style=color:#f92672>=</span><span style=color:#e6db74>"front"</span>>
</span></span><span style=display:flex><span><span style=color:#75715e><!-- Previous content --></span>
</span></span><span style=display:flex><span> </<span style=color:#f92672>div</span>>
</span></span><span style=display:flex><span> <<span style=color:#f92672>div</span> <span style=color:#a6e22e>class</span><span style=color:#f92672>=</span><span style=color:#e6db74>"back"</span>>
</span></span><span style=display:flex><span><span style=color:#75715e><!-- Back content --></span>
</span></span><span style=display:flex><span> </<span style=color:#f92672>div</span>>
</span></span><span style=display:flex><span> </<span style=color:#f92672>div</span>>
</span></span><span style=display:flex><span></<span style=color:#f92672>div</span>>
</span></span></code></pre></div><p>CSS code</p><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-css data-lang=css><span style=display:flex><span>.<span style=color:#a6e22e>rotate-container</span>:<span style=color:#a6e22e>hover</span> .<span style=color:#a6e22e>flipper</span>{
</span></span><span style=display:flex><span> <span style=color:#66d9ef>transform</span>: rotateY(<span style=color:#ae81ff>180</span><span style=color:#66d9ef>deg</span>);
</span></span><span style=display:flex><span>}
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span>.<span style=color:#a6e22e>rotate-container</span><span style=color:#f92672>,</span> .<span style=color:#a6e22e>front</span><span style=color:#f92672>,</span> .<span style=color:#a6e22e>back</span> {
</span></span><span style=display:flex><span> <span style=color:#66d9ef>width</span>: <span style=color:#ae81ff>320</span><span style=color:#66d9ef>px</span>;
</span></span><span style=display:flex><span> <span style=color:#66d9ef>height</span>: <span style=color:#ae81ff>480</span><span style=color:#66d9ef>px</span>;
</span></span><span style=display:flex><span>}
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span>.<span style=color:#a6e22e>flipper</span> {
</span></span><span style=display:flex><span> <span style=color:#66d9ef>transition-duration</span>: <span style=color:#ae81ff>1</span><span style=color:#66d9ef>s</span>;
</span></span><span style=display:flex><span> <span style=color:#66d9ef>transform-style</span>: <span style=color:#66d9ef>preserve-3d</span>;
</span></span><span style=display:flex><span> <span style=color:#66d9ef>position</span>: <span style=color:#66d9ef>relative</span>;
</span></span><span style=display:flex><span>}
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span>.<span style=color:#a6e22e>front</span><span style=color:#f92672>,</span> .<span style=color:#a6e22e>back</span> {
</span></span><span style=display:flex><span> <span style=color:#66d9ef>backface-visibility</span>: <span style=color:#66d9ef>hidden</span>;
</span></span><span style=display:flex><span> <span style=color:#66d9ef>position</span>: <span style=color:#66d9ef>absolute</span>;
</span></span><span style=display:flex><span> <span style=color:#66d9ef>top</span>: <span style=color:#ae81ff>0</span>;
</span></span><span style=display:flex><span> <span style=color:#66d9ef>left</span>: <span style=color:#ae81ff>0</span>;
</span></span><span style=display:flex><span>}
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span>.<span style=color:#a6e22e>front</span> {
</span></span><span style=display:flex><span> <span style=color:#66d9ef>z-index</span>: <span style=color:#ae81ff>2</span>;
</span></span><span style=display:flex><span>}
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span>.<span style=color:#a6e22e>back</span> {
</span></span><span style=display:flex><span> <span style=color:#66d9ef>transform</span>: rotateY(<span style=color:#ae81ff>180</span><span style=color:#66d9ef>deg</span>);
</span></span><span style=display:flex><span>}
</span></span></code></pre></div><h2 id=explanation-of-key-technical-points>Explanation of key technical points:</h2><h3 id=1transform-deformation>1.transform: deformation</h3><p><code>transform: rotateY(180deg)</code> means rotating 180 degrees along the Y axis.</p><h3 id=2transform-style-specify-the-space-where-the-child-elements-of-this-element-are-located>2.transform-style: Specify the space where the child elements of this element are located.</h3><p>Specifies whether the element’s children appear to lie in three-dimensional space or are flattened in the element’s plane.</p><p>The <code>transform-style</code> attribute has two parameters, <code>flat</code> and <code>preserve-3d</code>. <code>flat</code> is the default value, specifying that the child element is located in the plane where this element is located; <code>preserve-3d</code> specifies that the child element is positioned in a three-dimensional space.</p><h3 id=3backface-visibility-specifies-whether-the-element-is-visible-when-rotated-to-the-back>3.backface-visibility specifies whether the element is visible when rotated to the back.</h3><p>The default is visible, that is, the back side is visible, as shown in <code>Demo2</code>.</p><p>In Demo1, since it is another picture that is flipped over, the back face is not visible when it is set to backface-visibility:hidden.</p><h3 id=4transition-duration-indicates-the-time-it-takes-to-complete-the-transition-effect>4.transition-duration: Indicates the time it takes to complete the transition effect.</h3><p><code>transition-duration:1s</code> can be used in the abbreviated form <code>transition:1s</code>.</p><h3 id=5positionabsolute-absolute-positioning>5.position:absolute: absolute positioning.</h3><p>Use absolute positioning <code>position:absolute</code> to place the two elements before and after flipping in the same position.</p></div><footer class=post-footer><div class=post-tags><a href=/en/tags/css/>CSS</a></div><nav class=post-nav><a class=prev href=/ellipse-border-radius.html><i class="iconfont icon-left"></i>
<span class="prev-text nav-default">Ellipse Border Radius</span>
<span class="prev-text nav-mobile">Prev</span>
</a><a class=next href=/less.html><span class="next-text nav-default">Css Prep</span>
<span class="next-text nav-mobile">Next</span>
<i class="iconfont icon-right"></i></a></nav></footer></article></div></div></main><footer id=footer class=footer><div class=social-links><a href=mailto:frankwang0909@gmail.com class="iconfont icon-email" title=email></a><a href=https://www.twitter.com/frankwang0909 class="iconfont icon-twitter" title=twitter></a><a href=https://www.github.com/frankwang0909 class="iconfont icon-github" title=github></a><a href=http://frankwang0909.github.io/en/index.xml type=application/rss+xml class="iconfont icon-rss" title=rss></a></div><div class=copyright><span class=power-by>Powered by <a class=hexo-link href=https://gohugo.io>Hugo</a>
</span><span class=division>|</span>
<span class=theme-info>Theme -
<a class=theme-link href=https://github.com/olOwOlo/hugo-theme-even>Even</a>
</span><span class=copyright-year>©
2016 -
2026<span class=heart><i class="iconfont icon-heart"></i></span><span></span></span></div></footer><div class=back-to-top id=back-to-top><i class="iconfont icon-up"></i></div></div><script type=text/javascript src=/lib/jquery/jquery-3.2.1.min.js></script><script type=text/javascript src=/lib/slideout/slideout-1.0.1.min.js></script><script type=text/javascript src=/lib/fancybox/jquery.fancybox-3.1.20.min.js></script><script type=text/javascript src=/js/main.min.4ae89da218555efa0e7093a20b92017d2e1202b66fff9fc2edf4cb8d44b44c6e.js></script><script type=text/javascript>window.MathJax={tex:{}}</script><script async src=https://cdn.jsdelivr.net/npm/mathjax@3.0.5/es5/tex-mml-chtml.js integrity="sha256-HGLuEfFcsUJGhvB8cQ8nr0gai9EucOOaIxFw7qxmd+w=" crossorigin=anonymous></script></body></html>