У меня есть эффект «поворота при наведении» на div, и я хочу сделать так, чтобы при его вращении элементы внутри него казались ближе к зрителю и имели большую глубину в отношении фона. Однако применение translateZ(); заставляет их выглядеть больше, но они по-прежнему выглядят «прилипшими» к фону.
До сих пор я пытался применить свойства perspective и transform: perspective(); к родительскому элементу и transform-style: preserve-3d; к дочернему элементу, но он по-прежнему выглядит приклеенным к фону.
Итак, чтобы было ясно, это то, что я хочу воссоздать.
Но вот что я получаю
let gridElements = document.getElementsByClassName('grid-member');
let magify = (container, inner, adjust) => {
// Mouse
var mouse = {
_x: 0,
_y: 0,
x: 0,
y: 0,
updatePosition: function (event) {
var e = event || window.event;
this.x = e.clientX - this._x;
this.y = (e.clientY - this._y) * -1;
},
setOrigin: function (e) {
this._x = e.offsetLeft + Math.floor(e.offsetWidth / 2);
this._y = e.offsetTop + Math.floor(e.offsetHeight / 2);
},
show: function () {
return '(' + this.x + ', ' + this.y + ')';
},
};
// Track the mouse position relative to the center of the container.
mouse.setOrigin(container);
//----------------------------------------------------
var counter = 0;
var refreshRate = 3;
var isTimeToUpdate = function () {
return counter++ % refreshRate === 0;
};
//----------------------------------------------------
var onMouseEnterHandler = function (event) {
container.style.zIndex = '3';
update(event);
};
var onMouseLeaveHandler = function () {
container.style.transform = '';
// inner.children[1].style.transform = '';
container.style.zIndex = '';
};
var onMouseMoveHandler = function (event) {
if (isTimeToUpdate()) {
update(event);
}
};
//----------------------------------------------------
var update = function (e) {
// Set up multipliers
var yMult = 0.03;
var xMult = 0.063;
var d = document,
bd = d.getElementsByTagName('body')[0],
win = window;
var bdst = $(window).scrollTop();
var bdsl = bd.scrollLeft;
var pageX = e.pageX;
var pageY = e.pageY;
var offsets = inner.getBoundingClientRect();
var w = inner.clientWidth || inner.offsetWidth || inner.scrollWidth;
var h = inner.clientHeight || inner.offsetHeight || inner.scrollHeight;
var wMultiple = 320 / w;
var offsetX = 0.52 - (pageX - offsets.left - bdsl) / w;
var offsetY = 0.52 - (pageY - offsets.top - bdst) / h;
var dy = pageY - offsets.top - bdst - h / 2;
var dx = pageX - offsets.left - bdsl - w / 2;
var yRotate = (offsetX - dx) * (yMult * wMultiple);
var xRotate = (dy - offsetY) * (xMult * wMultiple);
var imgCSS;
imgCSS =
'perspective(' +
w * 3 +
'px) rotateX(' +
xRotate * 1 +
'deg) rotateY(' +
yRotate * 1 +
'deg)';
// var innerCSS = 'rotateX(' + xRotate * 0.2 + 'deg) rotateY(' + yRotate * 0.35 + 'deg) translateZ(30px)';
// inner.children[1].style.transform = innerCSS;
container.style.transform = imgCSS;
};
var updateTransformStyle = function (x, y) {
var style = 'rotateX(' + x + 'deg) rotateY(' + y + 'deg)';
container.style.transform = style;
container.style.webkitTransform = style;
container.style.mozTranform = style;
container.style.msTransform = style;
container.style.oTransform = style;
};
//--------------------------------------------------------
container.onmousemove = onMouseMoveHandler;
container.onmouseleave = onMouseLeaveHandler;
container.onmouseenter = onMouseEnterHandler;
};
magify(gridElements[0], gridElements[0].children[0], 0.5);
body {
background: black;
display: flex;
justify-content: center;
}
#container {
display: flex;
flex-wrap: wrap;
width: 1500px;
margin: auto;
}
#container > div {
height: 300px;
width: 300px;
background: red;
perspective: 30px;
perspective-origin: center;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
background: url('https://i.picsum.photos/id/1018/3914/2935.jpg');
background-size: cover;
background-repeat: no-repeat;
}
#container > div > div {
transform: translateZ(20px);
transform-style: preserve-3d;
}
#container > div p {
color: white;
font-family: 'Montserrat', sans-serif;
font-weight: 800;
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div class="grid-member large">
<div><p>Lorem Ipsum</p></div>
</div>
</div>