You are here

slick.theme--d3-back.css in Slick extras 8

Same filename and directory in other branches
  1. 7.3 css/theme/slick.theme--d3-back.css

. Adds 3d view with focal point at back, best with centerMode + 3 slidesToShow. Detailed stylings are all yours, get yourself dirty.

File

css/theme/slick.theme--d3-back.css
View source
  1. /**
  2. * @file.
  3. * Adds 3d view with focal point at back, best with centerMode + 3 slidesToShow.
  4. * Detailed stylings are all yours, get yourself dirty.
  5. */
  6. .slick--skin--d3-back .slick-initialized {
  7. overflow: hidden;
  8. padding-bottom: 30px;
  9. padding-top: 30px;
  10. }
  11. .slick--skin--d3-back .slick-initialized .slick-list {
  12. margin: 0 -120px;
  13. }
  14. @media (min-width: 65em) {
  15. .slick--skin--d3-back .slick-initialized .slick-list {
  16. margin: 0 -210px;
  17. }
  18. }
  19. .slick--skin--d3-back .slick-initialized .slide {
  20. overflow: hidden;
  21. }
  22. .slick--skin--d3-back .slick-initialized .slide .slide__content {
  23. -webkit-perspective: 1500px;
  24. -ms-perspective: 1500px;
  25. perspective: 1500px;
  26. -webkit-transform-style: preserve-3d;
  27. -ms-transform-style: preserve-3d;
  28. transform-style: preserve-3d;
  29. }
  30. .slick--skin--d3-back .slick-initialized .slide .slide__media {
  31. margin: 30px 0;
  32. outline: 1px solid transparent;
  33. -ms-transform: rotateY(25deg);
  34. -webkit-transform: rotateY(25deg);
  35. transform: rotateY(25deg);
  36. -webkit-backface-visibility: hidden;
  37. backface-visibility: hidden;
  38. -webkit-transition: opacity 1s ease 0s, -webkit-transform 1s;
  39. transition: opacity 1s ease 0s, transform 1s;
  40. -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  41. transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  42. }
  43. .slick--skin--d3-back .slick-initialized .slide .slide__caption {
  44. bottom: 0;
  45. padding: 0;
  46. position: relative;
  47. opacity: 0;
  48. visibility: hidden;
  49. -webkit-transition: all 0.4s ease-in-out 0s;
  50. transition: all 0.4s ease-in-out 0s;
  51. -webkit-backface-visibility: hidden;
  52. -webkit-transform: scale(0);
  53. -ms-transform: scale(0);
  54. transform: scale(0);
  55. }
  56. .slick--skin--d3-back .slick-initialized .slick-current ~ .slide .slide__media {
  57. -ms-transform: rotateY(-25deg);
  58. -webkit-transform: rotateY(-25deg);
  59. transform: rotateY(-25deg);
  60. }
  61. .slick--skin--d3-back .slick-initialized .slick-current.slide .slide__media {
  62. -ms-transform: rotateY(0deg);
  63. -webkit-transform: rotateY(0deg);
  64. transform: rotateY(0deg);
  65. }
  66. .slick--skin--d3-back .slick-initialized .slick-current.slide .slide__caption {
  67. bottom: auto;
  68. position: relative;
  69. opacity: 1;
  70. visibility: visible;
  71. -webkit-transform: scale(1);
  72. -ms-transform: scale(1);
  73. transform: scale(1);
  74. }
  75. .slick--skin--d3-back .slick-initialized .slick__arrow {
  76. left: 50%;
  77. margin-left: -25%;
  78. width: 50%;
  79. }
  80. .slick--skin--d3-back .slick-initialized .slick-dots {
  81. bottom: 0;
  82. }