123456789101112131415161718192021222324252627282930313233343536373839404142434445464748 |
- <!DOCTYPE HTML>
- <html>
- <title>Reftest, bug 1156456</title>
- <style>
- html, body {
- height: 100%;
- }
- body {
- background: white;
- perspective: 1000px;
- }
- div, div::before, div::after {
- width: 200px; height: 200px;
- }
- div {
- position: absolute;
- top: 0; right: 0; bottom: 0; left: 0;
- margin: auto;
- transform-origin: 50% 50% 100px;
- background: #006;
- /* approximately rotateY(-120deg) rotateX(60deg); */
- transform: rotateY(-2.0944rad) rotateX(1.0472rad);
- transform-style: preserve-3d;
- }
- div::before, div::after {
- position: absolute;
- top: 0; left: 0;
- content: "";
- }
- div::before {
- background: #00f;
- transform: translate3D(100px, 0, 100px) rotateY(90deg);
- }
- div::after {
- background: #00c;
- transform: translate3D(0, -100px, 100px) rotateX(90deg);
- }
- </style>
- <div></div>
|