CSS3 3D Rotation: How perspective work? - css

Question

I'm working on 3D bloc following mouse move on it. I'm updating CSS values to create a 3D effect.
The Base look like:
document.addEventListener('DOMContentLoaded', function() {
let mouseMove = function (e) {
let el = e.currentTarget;
let delta_x = parseFloat(e.offsetX / el.offsetWidth).toFixed(3)
let delta_y = parseFloat(e.offsetY / el.offsetHeight).toFixed(3)
var transform = "rotateY(" + ((delta_x - 0.5) * 50) + "deg) " +
"rotateX(" + (-(delta_y - 0.5) * 50) + "deg)"
var boxShadow = parseInt(-(delta_x - 0.5) * 8) +"px " +
parseInt(-((delta_y - 0.5) * 8) + 2) +
"px 4px rgba(34, 25, 25, 0.4);"
el.setAttribute('style',
"transform: " + transform + "; " +
"box-shadow: " + boxShadow);
}
let els = document.getElementsByClassName("el")
let len = els.length
for(let i=0; i<len; i++) {
let el = els[i]
el.addEventListener("mousemove", mouseMove)
}
}, false);
html, body, #wrapper {
height: 100%;
margin: 0;
padding: 0;
}
#wrapper {
background: #a4d24b;
/*font-family: 'Open Sans', sans-serif; */
font-weight: 400;
font-size: 14px;
display: flex;
flex-wrap: wrap;
perspective: 500px;
}
.container {
position: relative;
margin: auto;
width: 20%;
height: 40%;
transition: all .25s;
transform-origin: 50% 50%;
}
.container:hover {
transform: translateZ(25px);
}
.el {
height: 100%;
background: #FFF; color: #000;
box-shadow: 0 2px 4px rgba(34, 25, 25, 0.4);
}
.el:not(:hover) {
transform: rotateY(0deg) rotateX(0deg) !important;
box-shadow: 0 2px 4px rgba(34, 25, 25, 0.4) !important;
}
<div id="wrapper">
<div class="container">
<div class="el"></div>
</div>
</div>
The JS concept is simple: When the mouse move on the bloc, I got the position (in %: position / bloc size) of the mouse on x and y.
For x (0 -> 1) I move the transform property from rotate: rotateY(-12deg) to rotate: rotateY(12deg)
Same thing for y (0 -> 1) from rotate: rotateX(-12deg) to rotate: rotateX(12deg)
I also move the box-shadow (with x and y) to help visualization.
The result look good, but if I add a background to this bloc the result look weird.
(Same code with background)
document.addEventListener('DOMContentLoaded', function() {
let mouseMove = function (e) {
let el = e.currentTarget;
let delta_x = parseFloat(e.offsetX / el.offsetWidth).toFixed(3)
let delta_y = parseFloat(e.offsetY / el.offsetHeight).toFixed(3)
var transform = "rotateY(" + ((delta_x - 0.5) * 50) + "deg) " +
"rotateX(" + (-(delta_y - 0.5) * 50) + "deg)"
var boxShadow = parseInt(-(delta_x - 0.5) * 8) +"px " +
parseInt(-((delta_y - 0.5) * 8) + 2) +
"px 4px rgba(34, 25, 25, 0.4);"
el.setAttribute('style',
"transform: " + transform + "; " +
"box-shadow: " + boxShadow);
}
let els = document.getElementsByClassName("el")
let len = els.length
for(let i=0; i<len; i++) {
let el = els[i]
el.addEventListener("mousemove", mouseMove)
}
}, false);
html, body, #wrapper {
height: 100%;
margin: 0;
padding: 0;
}
#wrapper {
background: #a4d24b;
/*font-family: 'Open Sans', sans-serif; */
font-weight: 400;
font-size: 14px;
display: flex;
flex-wrap: wrap;
perspective: 500px;
}
.container {
position: relative;
margin: auto;
width: 20%;
height: 40%;
transition: all .25s;
transform-origin: 50% 50%;
}
.container:hover {
transform: translateZ(25px);
}
.el {
height: 100%;
background: #FFF url(https://images-na.ssl-images-amazon.com/images/M/MV5BMjQyODg5Njc4N15BMl5BanBnXkFtZTgwMzExMjE3NzE#._V1_SY1000_SX686_AL_.jpg);
background-size: cover;
background-position: 50% 50%;
color: #000;
box-shadow: 0 2px 4px rgba(34, 25, 25, 0.4);
}
.el:not(:hover) {
transform: rotateY(0deg) rotateX(0deg) !important;
box-shadow: 0 2px 4px rgba(34, 25, 25, 0.4) !important;
}
<div id="wrapper">
<div class="container">
<div class="el"></div>
</div>
</div>
Now, it's look like only the top part working, and the bottom isn't moving in the good direction. (Best reproduction when the mouse is moving from top-left to bottom-right).
Did I made a mistake ? Or it's a perspective problem ?
Update Some browser didn't like the CSS bellow, if the white box didn't move when you move the mouse on it, just remove this.
.el:not(:hover) {
transform: rotateY(0deg) rotateX(0deg) !important;
box-shadow: 0 2px 4px rgba(34, 25, 25, 0.4) !important;
}

Answer 1

You need to have perspective applied on the immediate parent of the transformed element.
I solved using perspective: inherit
document.addEventListener('DOMContentLoaded', function() {
let mouseMove = function (e) {
let el = e.currentTarget;
let delta_x = parseFloat(e.offsetX / el.offsetWidth).toFixed(3)
let delta_y = parseFloat(e.offsetY / el.offsetHeight).toFixed(3)
var transform = "rotateY(" + ((delta_x - 0.5) * 50) + "deg) " +
"rotateX(" + (-(delta_y - 0.5) * 50) + "deg)"
var boxShadow = parseInt(-(delta_x - 0.5) * 8) +"px " +
parseInt(-((delta_y - 0.5) * 8) + 2) +
"px 4px rgba(34, 25, 25, 0.4);"
el.setAttribute('style',
"transform: " + transform + "; " +
"box-shadow: " + boxShadow);
}
let els = document.getElementsByClassName("el")
let len = els.length
for(let i=0; i<len; i++) {
let el = els[i]
el.addEventListener("mousemove", mouseMove)
}
}, false);
html, body, #wrapper {
height: 100%;
margin: 0;
padding: 0;
}
#wrapper {
background: #a4d24b;
/*font-family: 'Open Sans', sans-serif; */
font-weight: 400;
font-size: 14px;
display: flex;
flex-wrap: wrap;
perspective: 500px;
}
.container {
position: relative;
margin: auto;
width: 20%;
height: 40%;
transition: all .25s;
transform-origin: 50% 50%;
perspective: inherit;
}
.container:hover {
transform: translateZ(25px);
}
.el {
height: 100%;
background: #FFF url(https://images-na.ssl-images-amazon.com/images/M/MV5BMjQyODg5Njc4N15BMl5BanBnXkFtZTgwMzExMjE3NzE#._V1_SY1000_SX686_AL_.jpg);
background-size: cover;
background-position: 50% 50%;
color: #000;
box-shadow: 0 2px 4px rgba(34, 25, 25, 0.4);
}
.el:not(:hover) {
transform: rotateY(0deg) rotateX(0deg) !important;
box-shadow: 0 2px 4px rgba(34, 25, 25, 0.4) !important;
}
<div id="wrapper">
<div class="container">
<div class="el"></div>
</div>
</div>