animate-cube-radians-zoom-ref.html 816 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. <!DOCTYPE HTML>
  2. <html reftest-zoom="1.5">
  3. <title>Reftest, bug 1156456</title>
  4. <style>
  5. html, body {
  6. height: 100%;
  7. }
  8. body {
  9. background: white;
  10. perspective: 1000px;
  11. }
  12. div, div::before, div::after {
  13. width: 200px; height: 200px;
  14. }
  15. div {
  16. position: absolute;
  17. top: 0; right: 0; bottom: 0; left: 0;
  18. margin: auto;
  19. transform-origin: 50% 50% 100px;
  20. background: #006;
  21. /* approximately rotateY(-120deg) rotateX(60deg); */
  22. transform: rotateY(-2.0944rad) rotateX(1.0472rad);
  23. transform-style: preserve-3d;
  24. }
  25. div::before, div::after {
  26. position: absolute;
  27. top: 0; left: 0;
  28. content: "";
  29. }
  30. div::before {
  31. background: #00f;
  32. transform: translate3D(100px, 0, 100px) rotateY(90deg);
  33. }
  34. div::after {
  35. background: #00c;
  36. transform: translate3D(0, -100px, 100px) rotateX(90deg);
  37. }
  38. </style>
  39. <div></div>