How can I move the center point of the background image down? - css

Question

I have a background image (a schematic) spinning. But I need the center of that image to be lower.
If you think of it like a spinning disc, we should only see the top of the disc, and not the bottom.
I need it to stay within the same border/frame area.
I need the 'product images' to stay centered where they are.
You can see what I have here:
http://www.meteorsite.com/images/spinner/
Thanks in advance for any suggestions...
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(3000).next().fadeIn(3000).end()
.appendTo('#slideshow');console.log($('#slideshow > div:first').height()+'-'+$('#slideshow > div:first').width())
}, 5000);
*{margin:0;padding:0;box-sizing:border-box}
#slideshow {
text-align: center;
width: 100%;
height: 100%;
top: 50;
left: 0;
right: 0;
bottom: 0;
}
#slideshow > div {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.wrapper {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
animation: bend 1s linear 0s alternate; /*linear XS is delay before disc
flaps down*/
-webkit-animation-fill-mode: forwards;
}
.vinyl {
width: 600px;
height: 600px;
border-radius: 50%;
animation: moveLeft 0s linear 0s alternate, spin 30s linear 0s infinite; /*
time to spin, etc */
}
.vinyl div {
border: 0px solid #222;
box-sizing: border-box;
height: 100%;
width: 100%;
padding: 5px;
border-radius: 50%;
}
.vinyl__label {
border: none;
background: white;
color: white;
text-align: center;
background-image: url(schemo.gif);
background-size: cover;
background-position: center;
display: flex;
justify-content: center;
align-items: center;
}
#keyframes spin {
0% {
transform: rotateZ(0deg) rotateY(0deg);
}
25% {
transform: rotateZ(90deg) rotateY(0deg);
}
75% {
transform: rotateZ(270deg) rotateY(0deg);
}
100% {
transform: rotateZ(360deg) rotateY(0deg);
}
}
#keyframes bend { /* how far the disc leans back*/
from {
transform: rotateX(55deg);
}
to {
transform: rotateX(55deg);
}
}
#keyframes moveLeft {
transition: all 2s ease-in-out;
-webkit-transition: all 2s ease-in-out;
/** Chrome & Safari **/
-moz-transition: all 2s ease-in-out;
/** Firefox **/
-o-transition: all 2s ease-in-out;
/** Opera **/
from {
transform: translate(350px, 0);
}
to {
transform: translate(350px, 0);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position: absolute;left: 0;right: 0;margin: auto">
<div class="wrapper" style="position: relative;">
<div style="box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);">
<div class="vinyl">
<div class="vinyl__label">
<i class="fa fa-circle" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<div id="slideshow" style="position: absolute;">
<div style="background: url("http://web3designs.com/spin/slide-1.gif") center center no-repeat;"></div><div style="background: url("http://web3designs.com/spin/slide-2.gif") center center no-repeat; display: none;"></div><div style="background: url("http://web3designs.com/spin/slide-3.gif") center center no-repeat; display: none;"></div></div>
</div>
Here is a quick draft of the disc's position:

Answer 1

You have to add perspective to your .wrapper to make it true 3D.
Then rotate .vinyl around X axis to set a view angle and spin, spin, spin around Z axis:
$(() => {
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(3000).next().fadeIn(3000).end()
.appendTo('#slideshow');
//console.log($('#slideshow > div:first').height() + '-' + $('#slideshow > div:first').width())
}, 5000);
})
* {
margin: 0;
padding: 0;
box-sizing: border-box
}
#slideshow {
text-align: center;
width: 100%;
height: 100%;
top: 50;
left: 0;
right: 0;
bottom: 0;
}
#slideshow>div {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.wrapper {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
animation: bend 1s linear 0s alternate;
/*linear XS is delay before disc
flaps down*/
-webkit-animation-fill-mode: forwards;
perspective:1000px;
}
.wrapper > div {overflow:hidden; box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);}
.vinyl {
width: 600px;
height: 600px;
border-radius: 50%; border:solid 1px;
transform: translateY(50%) rotateX(60deg) rotateZ(0);
animation: moveLeft 0s linear 0s alternate, spin 30s linear 0s infinite;
/*
time to spin, etc */
}
.vinyl div {
border: 0px solid #222;
box-sizing: border-box;
height: 100%;
width: 100%;
padding: 5px;
border-radius: 50%;
}
.vinyl__label {
border: none;
background: white;
color: white;
text-align: center;
background-image: url(https://etap.com/images/default-source/product/electrical-single-line-diagram/electrical-single-line-diagram-53a2be6450c286c028629ff00005ae238.jpg?sfvrsn=14);
background-size: cover;
background-position: center;
display: flex;
justify-content: center;
align-items: center;
}
#keyframes spin {
100% {
transform: translateY(50%) rotateX(60deg) rotateZ(360deg);
}
}
#keyframes bend {
/* how far the disc leans back*/
from {
transform: rotateX(55deg);
}
to {
transform: rotateX(55deg);
}
}
#keyframes moveLeft {
transition: all 2s ease-in-out;
-webkit-transition: all 2s ease-in-out;
/** Chrome & Safari **/
-moz-transition: all 2s ease-in-out;
/** Firefox **/
-o-transition: all 2s ease-in-out;
/** Opera **/
from {
transform: translate(350px, 0);
}
to {
transform: translate(350px, 0);
}
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position: absolute;left: 0;right: 0;margin: auto">
<div class="wrapper" style="position: relative;">
<div>
<div class="vinyl">
<div class="vinyl__label">
<i class="fa fa-circle" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<div id="slideshow" style="position: absolute">
<div style="background: url(http://web3designs.com/spin/slide-1.gif) center center no-repeat;"></div>
<div style="background: url(http://web3designs.com/spin/slide-2.gif) center center no-repeat; display: none;"></div>
<div style="background: url(http://web3designs.com/spin/slide-3.gif) center center no-repeat; display: none;"></div>
</div>
</div>