animate-cube-degrees-ref.html 735 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. <!DOCTYPE HTML>
  2. <html>
  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. transform: rotateY(-120deg) rotateX(60deg);
  22. transform-style: preserve-3d;
  23. }
  24. div::before, div::after {
  25. position: absolute;
  26. top: 0; left: 0;
  27. content: "";
  28. }
  29. div::before {
  30. background: #00f;
  31. transform: translate3D(100px, 0, 100px) rotateY(90deg);
  32. }
  33. div::after {
  34. background: #00c;
  35. transform: translate3D(0, -100px, 100px) rotateX(90deg);
  36. }
  37. </style>
  38. <div></div>