Hi, I’ve added vanilla-tilt.js to my webpage to create a tilt effect. It works but once I hover on it the div just moves out of the page for 50% like it would ignore my translate -50% -50% property please help me here’s the code:
HTML:
<div id="container">
<section id="Home">
<div class="box" data-aos="fade-right" data-aos-duration="500" data-tilt>
<h1 data-aos="fade-right" data-aos-duration="500">Home</h1>
<h2 data-aos="fade-right" data-aos-duration="800"> Blue throttle has fun crash physics 😎 and also each player is able to fly multiple planes.</h2>
<iframe width="560" height="315" src="https://www.youtube.com/embed/hCK0zptSj-k" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</section>
</div>
CSS:
#container section#Home h1 {
display: inline-block;
color: white;
background-color: #4285F4;
border-radius: 30px;
padding: 5px;
padding-left: 20px;
padding-right: 20px;
box-shadow: 7px 10px 10px 0px rgba(0,0,0,0.5);
margin-top: 10px;
}
#container section#Home iframe {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 999999;
width: 80%;
border-radius: 30px;
margin-top: 2%;
box-shadow: 10px 10px 10px 0 rgba(0, 0, 0, 0.5);
perspective: 1000px;
}
#container section#Home h2 {
margin-left: 10px;
margin-right: 10px;
padding: 20px 0 200;
margin-top: 10px;
font-size: 20px;
}
#container section#Home .box {
transform-style: preserve-3d;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
height: 80%;
border-radius: 50px;
background-color: rgba(255, 255, 255, .15);
backdrop-filter: blur(20px);
}
JS:
<script src="jquery.js" ></script> <!-- Load jQuery first -->
<script src="vanilla-tilt.js"></script> <!-- Load Tilt.js library -->
The library is applying its own transform which is overwriting yours. That is how it does what it does, using transform.
If you are just using the positioning and transform for centering you can use a different method, like using flexbox, or grid, etc.
But flexbox doesn’t work! 
Doesn’t work how?
Post your updated code, or better yet create a Codepen and post it so we can see what you have tried.
Here is a quick example using flexbox and auto margin.
edit: all done https://codepen.io/lasjorg/pen/Yzpmodm
Well, now try using flexbox and auto margin. You didn’t update the centering CSS in the code in that Codepen.
Read the CSS Tricks article and look at the example I posted.
I managed to center it horizontally now with margin: 0 auto; but I can’t manage to center it vertically… Could you help me please?
First remove the position centering (position, offset, and transform properties).
Now use the container element to center the children.
display: flex;
justify-content: center;
align-items: center;
Or
display: grid;
place-content: center;
Umm so it centers all the children elemens but not the box itself …
Please update your Codepen with your latest code.
1 Like
Remove the height: 100% on the section element and remove all the position centering, which includes centering CSS for the iframe.
Edit: And of course actually add flexbox to the container as well.
Can you show me on your codepen because if I would remove the 100% height from the section it wouldn’t be good anymore because when I click on the navbar link a section of 100% height should appear… I’ve got multiple sections by the way not that this fact changed something
What navbar? Your code has no such element. It’s very hard to work with just pieces of code if they need to work with other code I do not know about.
You can move the centering down one level to #Home (i.e. the section). Just know the 80% height on .box likely needs to be adjusted.
I’ll put you the whole code inside. I commented every section.
https://codepen.io/Chris2005/pen/Yzpmogm
Put the centering on #Home.
#Home {
display: flex;
justify-content: center;
align-items: center;
}
That is unless you want to center the content inside all the sections in the center, in which case you can just use the section.
1 Like
Owwww! Nice it worked thank you very much 
Also for your patience Really appreciate it! One last question. Do you maybe know why the tilting effect takes so long normally it shouldn’t?
No problem, happy to help.
Do you mean the tilt speed?
I would assume that is just the default settings. You can look at the docs and the options object for more control. You will have to add a bit of JS to the project but it’s really just initializing it and passing it an options object. You can see the example in the docs.
BTW, I will delete the Codepen example I posted, if you are done with it?
1 Like
Yes, no worries, I’m done with it thanks.
About the speed.
I’m guessing the code that looks at the mouse position might also take into account how close it (the mouse pointer) is to the edge. So on small elements, it will tilt faster and on larger elements slower (that is unless you move your mouse really fast to the edge of the tilt element). But that’s just a guess.
1 Like