Coverflow Scss

[Pascal Brewing]

/* Coverflow Theme */
@mixin transformItem($translateX, $rotateY, $scale,$zIndex,$opacitiy) {
-webkit-transform: translateX($translateX) rotateY($rotateY) scale($scale);
-moz-transform: translateX($translateX) rotateY($rotateY) scale($scale);
-ms-transform: translateX($translateX) rotateY($rotateY) scale($scale);
-o-transform: translateX($translateX) rotateY($rotateY) scale($scale);
transform: translateX($translateX) rotateY($rotateY) scale($scale);
-sand-transform: translateX($translateX) rotateY($rotateY) scale($scale);
z-index: $zIndex;
opacity: $opacitiy;
}
.coverflow {
height: 320px;
position: relative;
article{
-webkit-perspective: 600px;
-moz-perspective: 600px;
-ms-perspective: 600px;
-o-perspective: 600px;
perspective: 600px;
position: absolute;
top: 0px;
right: 0;
left: 43%;
bottom: 0;
}
section{
background: transparent;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
background: transparent;
width: 72px;
height: 280px;
position: absolute;
padding-top: 0;
opacity: 0;
a{
color: rgb(42, 206, 185);
}
&.bespoke-active {
opacity: 1;
z-index: 1;
}
&.bespoke-slide {
-webkit-transition: -webkit-transform .7s ease, opacity .7s ease, background-color .7s ease;
-moz-transition: -moz-transform .7s ease, opacity .7s ease, background-color .7s ease;
-ms-transition: -ms-transform .7s ease, opacity .7s ease, background-color .7s ease;
-o-transition: -o-transform .7s ease, opacity .7s ease, background-color .7s ease;
transition: transform .7s ease, opacity .7s ease, background-color .7s ease;
}
&.bespoke-before {
@include transformItem(-140px,-5deg,0.5,6,0.0);
}
&.bespoke-before-3 {
@include transformItem(-128px,5deg,0.6,7,0.4);
}
&.bespoke-before-2 {
@include transformItem(-92px,5deg,0.7,9,0.5);
}
&.bespoke-before-1 {
@include transformItem(-56px,5deg,0.8,9,0.6);
}
&.bespoke-after {
@include transformItem(36px,-5deg,0.8,6,0.0);
}
&.bespoke-after-1 {
@include transformItem(56px,-5deg,0.8,9,0.6);
}
&.bespoke-after-2 {
@include transformItem(92px,-5deg,0.7,8,0.5);
}
&.bespoke-after-3 {
@include transformItem(128px,-5deg,0.6,7,0.4);
}
}
}

[Pascal Brewing]

For Your Community maybe everyone need it
example http://pascal-brewing.de

[Mark Dalgleish]

If you'd like to share a theme, I'd recommend making a theme repo. You could name it something like bespoke-coverflow.scss :)

[Pascal Brewing]

ok sorry

[Mark Dalgleish]

No worries, no need to apologise :)