You are here

Home » API reference » Slick extras 7.3

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

Same filename and directory in other branches
  1. 8 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. 

  7. .slick--skin--d3-back .slick-initialized {

  8.   overflow: hidden;

  9.   padding-bottom: 30px;

  10.   padding-top: 30px;

  11. }

  12. 

  13. .slick--skin--d3-back .slick-initialized .slick-list {

  14.   margin: 0 -120px;

  15. }

  16. 

  17. @media (min-width: 65em) {

  18.   .slick--skin--d3-back .slick-initialized .slick-list {

  19.     margin: 0 -210px;

  20.   }

  21. }

  22. 

  23. .slick--skin--d3-back .slick-initialized .slide {

  24.   overflow: hidden;

  25. }

  26. 

  27. .slick--skin--d3-back .slick-initialized .slide .slide__content {

  28.   -webkit-perspective: 1500px;

  29.   -ms-perspective: 1500px;

  30.   perspective: 1500px;

  31.   -webkit-transform-style: preserve-3d;

  32.   -ms-transform-style: preserve-3d;

  33.   transform-style: preserve-3d;

  34. }

  35. 

  36. .slick--skin--d3-back .slick-initialized .slide .slide__media {

  37.   margin: 30px 0;

  38.   outline: 1px solid transparent;

  39.   -ms-transform: rotateY(25deg);

  40.   -webkit-transform: rotateY(25deg);

  41.   transform: rotateY(25deg);

  42.   -webkit-backface-visibility: hidden;

  43.   backface-visibility: hidden;

  44.   -webkit-transition: opacity 1s ease 0s, -webkit-transform 1s;

  45.   transition: opacity 1s ease 0s, transform 1s;

  46.   -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);

  47.   transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);

  48. }

  49. 

  50. .slick--skin--d3-back .slick-initialized .slide .slide__caption {

  51.   bottom: 0;

  52.   padding: 0;

  53.   position: relative;

  54.   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);

  55.   opacity: 0;

  56.   visibility: hidden;

  57.   -webkit-transition: all 0.4s ease-in-out 0s;

  58.   transition: all 0.4s ease-in-out 0s;

  59.   -webkit-backface-visibility: hidden;

  60.   -webkit-transform: scale(0);

  61.   -ms-transform: scale(0);

  62.   transform: scale(0);

  63. }

  64. 

  65. .slick--skin--d3-back .slick-initialized .slick-current ~ .slide .slide__media {

  66.   -ms-transform: rotateY(-25deg);

  67.   -webkit-transform: rotateY(-25deg);

  68.   transform: rotateY(-25deg);

  69. }

  70. 

  71. .slick--skin--d3-back .slick-initialized .slick-current.slide .slide__media {

  72.   -ms-transform: rotateY(0deg);

  73.   -webkit-transform: rotateY(0deg);

  74.   transform: rotateY(0deg);

  75. }

  76. 

  77. .slick--skin--d3-back .slick-initialized .slick-current.slide .slide__caption {

  78.   bottom: auto;

  79.   position: relative;

  80.   filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);

  81.   opacity: 1;

  82.   visibility: visible;

  83.   -webkit-transform: scale(1);

  84.   -ms-transform: scale(1);

  85.   transform: scale(1);

  86. }

  87. 

  88. .slick--skin--d3-back .slick-initialized .slick__arrow {

  89.   left: 50%;

  90.   margin-left: -25%;

  91.   width: 50%;

  92. }

  93. 

  94. .slick--skin--d3-back .slick-initialized .slick-dots {

  95.   bottom: 0;

  96. }