You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

71 lines
1.7 KiB

  1. /*******************************
  2. shape Module
  3. *******************************/
  4. .shape.module {
  5. position: relative;
  6. -webkit-perspective: 2000px;
  7. -moz-perspective: 2000px;
  8. -ms-perspective: 2000px;
  9. perspective: 2000px;
  10. }
  11. .shape.module .shape {
  12. -webkit-transform-style: preserve-3d;
  13. -moz-transform-style: preserve-3d;
  14. -ms-transform-style: preserve-3d;
  15. transform-style: preserve-3d;
  16. }
  17. .shape.module .side {
  18. opacity: 1;
  19. width: 100%;
  20. -webkit-backface-visibility: hidden;
  21. -moz-backface-visibility: hidden;
  22. -ms-backface-visibility: hidden;
  23. backface-visibility: hidden;
  24. }
  25. /*---------------
  26. States
  27. ----------------*/
  28. /* Standard */
  29. .shape.module .side {
  30. display: none;
  31. }
  32. /* Animating */
  33. .shape.module.animating .shape {
  34. position: absolute;
  35. }
  36. .shape.module .animating.side {
  37. position: absolute;
  38. width: 100%;
  39. top: 0px;
  40. left: 0px;
  41. z-index: 100;
  42. }
  43. .shape.module .hidden.side {
  44. opacity: 0.7;
  45. }
  46. /* css animation */
  47. .shape.css.module {
  48. -webkit-transition: all 0.6s ease-in-out;
  49. -moz-transition: all 0.6s ease-in-out;
  50. -o-transition: all 0.6s ease-in-out;
  51. -ms-transition: all 0.6s ease-in-out;
  52. transition: all 0.6s ease-in-out;
  53. }
  54. .shape.css.module .shape {
  55. -webkit-transition: all 0.6s ease-in-out;
  56. -moz-transition: all 0.6s ease-in-out;
  57. -o-transition: all 0.6s ease-in-out;
  58. -ms-transition: all 0.6s ease-in-out;
  59. transition: all 0.6s ease-in-out;
  60. }
  61. .shape.css.module .side {
  62. -webkit-transition: opacity 0.6s ease-out;
  63. -moz-transition: opacity 0.6s ease-out;
  64. -o-transition: opacity 0.6s ease-out;
  65. -ms-transition: opacity 0.6s ease-out;
  66. transition: opacity 0.6s ease-out;
  67. }
  68. /* Active */
  69. .shape.module .active.side {
  70. display: block;
  71. }