35 lines
1.0 KiB
HTML
35 lines
1.0 KiB
HTML
<!DOCTYPE HTML>
|
|
<style>
|
|
.transformableContainer {
|
|
position: absolute;
|
|
-webkit-perspective-origin: 50% 50%;
|
|
-webkit-perspective: 100;
|
|
overflow: hidden;
|
|
}
|
|
.transformable {
|
|
-webkit-transform-origin: 0em 0em 0em;
|
|
-webkit-transform-style: preserve-3d;
|
|
}
|
|
.transformed {
|
|
transform: translate3d(100px, 100px, -25px);
|
|
}
|
|
.resetTransformOrigin {
|
|
-webkit-transform-origin: 50% 50% !important;
|
|
}
|
|
</style>
|
|
<!--
|
|
The red div should be covered by the green. If the red is showing, there is
|
|
an issue with the anchor point.
|
|
-->
|
|
<div class="transformableContainer transformable" style="width: 400px; height: 400px;">
|
|
<div class="transformable transformed">
|
|
<div class="content" style="width: 200px; height: 200px; background-color: red;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="transformableContainer resetTransformOrigin" style="width: 400px; height: 400px;">
|
|
<div class="transformable transformed">
|
|
<div class="content" style="width: 200px; height: 200px; background-color: green;"></div>
|
|
</div>
|
|
</div>
|