blob: 32168c69e985f167247b5e4e6a35e06d9934b0b0 (
plain)
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
|
<!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>
|
