<style>
body {
background-color
:
#000000
;
}
.addition {
margin-left
:
35%
;
margin-top
:
10%
;
}
.slideshow {
position
: centre;
margin
:
0
auto
;
padding-top
:
50px
;
height
:
250px
;
background-color
:
rgb
(
10
,
10
,
10
);
box-sizing: border-box;
}
.content {
margin
:
auto
;
width
:
190px
;
perspective:
1000px
;
position
:
relative
;
padding-
top
80px
;
}
.content-carrousel {
padding-left
:
40px
;
width
:
100%
;
position
:
absolute
;
float
:
right
;
animation: rotar
15
s infinite linear;
transform-style: preserve
-3
d;
}
.content-carrousel:hover {
animation-play-state: paused;
cursor
:
pointer
;
}
.content-carrousel figure {
width
:
100%
;
height
:
120px
;
border
:
1px
solid
#4d444d
;
overflow
:
hidden
;
position
:
absolute
;
}
.content-carrousel figure:nth-child(
1
) {
transform: rotateY(
0
deg) translateZ(
300px
);
}
.content-carrousel figure:nth-child(
2
) {
transform: rotateY(
60
deg) translateZ(
300px
);
}
.content-carrousel figure:nth-child(
3
) {
transform: rotateY(
120
deg) translateZ(
300px
);
}
.content-carrousel figure:nth-child(
4
) {
transform: rotateY(
180
deg) translateZ(
300px
);
}
.content-carrousel figure:nth-child(
5
) {
transform: rotateY(
240
deg) translateZ(
300px
);
}
.content-carrousel figure:nth-child(
6
) {
transform: rotateY(
300
deg) translateZ(
300px
);
}
.content-carrousel figure:nth-child(
7
) {
transform: rotateY(
360
deg) translateZ(
300px
);
}
.slideshow {
position
:
absolute
;
box-shadow:
0px
0
pz
20px
0px
#000
;
border-radius:
2px
;
}
.content-carrousel img {
image-rendering:
auto
;
transition:
all
300
ms;
width
:
100%
;
height
:
100%
;
}
.content-carrousel img:hover {
transform: scale(
1.2
);
transition:
all
300
ms;
}
@keyframes rotar {
from {
transform: rotateY(
0
deg);
}
to {
transform: rotateY(
360
deg);
}
}
</style>