Line 190: | Line 190: | ||
display: table-cell; | display: table-cell; | ||
vertical-align:middle; | vertical-align:middle; | ||
+ | } | ||
+ | .flip-container { | ||
+ | perspective:1000px; | ||
+ | } | ||
+ | .flip-container:hover .flipper { | ||
+ | transform:rotateY(180deg); | ||
+ | } | ||
+ | .flip-container,.front,.back { | ||
+ | width:320px; | ||
+ | height:480px; | ||
+ | } | ||
+ | .flipper { | ||
+ | transition:0.6s; | ||
+ | transform-style:preserve-3d; | ||
+ | position:relative; | ||
+ | } | ||
+ | .front,.back { | ||
+ | position:absolute; | ||
+ | } | ||
+ | .back { | ||
+ | transform:rotateY(180deg); | ||
} | } | ||
Line 243: | Line 264: | ||
<div class="content"> | <div class="content"> | ||
+ | |||
+ | <div class="flip-container"> | ||
+ | <div class="flipper"> | ||
+ | <div class="front" style="background-color: red"> | ||
+ | <p>正面</p> | ||
+ | </div> | ||
+ | <div class="back" style="background-color: gray"> | ||
+ | <p>背面</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
<span class="h1" id="Overview"> | <span class="h1" id="Overview"> |
Revision as of 04:43, 4 October 2018
Team
正面
背面