36 lines
768 B
HTML
36 lines
768 B
HTML
<!doctype html>
|
|
<html>
|
|
<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org">
|
|
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-backface-visibility">
|
|
<style>
|
|
#flip {
|
|
height: 100px;
|
|
width: 100px;
|
|
transform: rotateY(180deg);
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
#back {
|
|
background: lightblue;
|
|
transform: rotateY(180deg);
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 200px;
|
|
height: 200px;
|
|
backface-visibility: hidden;
|
|
}
|
|
|
|
#posabs {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
background: yellow;
|
|
}
|
|
</style>
|
|
<div id="flip">
|
|
<div id="back">
|
|
<i id="posabs">Text</i>
|
|
</div>
|
|
</div>
|
|
</html>
|