Имеется эффект который при наведении анимирует круг таким образом, чтобы менялось значение rotate по X и Y , но как добиться эффекта чтобы работало под translate.
var box = $(".scene");
box.on('mousemove', function (e) {
var x = e.clientX - $(this).offset().left + $(window).scrollLeft();
var y = e.clientY - $(this).offset().top + $(window).scrollTop();
var rY = map(x, 0, $(this).width(), -30, 30);
var rX = map(y, 0, $(this).height(), -30, 30);
$('#x').html(x);
$('#y').html(y);
$(this).children(".box").css("transform", "rotateY(" + rY + "deg)" + " " + "rotateX(" + -rX + "deg)");
});
box.on('mouseenter', function () {
$(this).children(".box").addClass('transition-fast');
});
box.on('mouseleave', function () {
$(this).children(".box").removeClass('transition-fast');
$(this).children(".box").css("transform", "rotateY(" + 0 + "deg)" + " " + "rotateX(" + 0 + "deg)");
});
function map(x, in_min, in_max, out_min, out_max)
{
return (x - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
font-family: monospace;
font-size: 14px;
}
.stats{
margin-left: 50px;
font-size: 20px;
width: 200px;
}
.scene {
width: 300px;
height: 300px;
perspective: 600px;
cursor: pointer;
border: 5px solid #000;
padding: 50px;
border-radius: 50%;
}
.box {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transform-origin: center;
transition: transform 0.5s ease;
background: #000;
border-radius: 50%;
}
.box.transition-fast {
transition: transform 0.05s linear;
}
.side {
position: absolute;
width: 100%;
height: 100%;
color: white;
backface-visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.side h2 {
transform: translateZ(30px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scene">
<div class="box">
<div class="side front-side">
<h2>Something text</h2>
</div>
</div>
</div>
<div class="stats">
<p>
X:
<span id="x"></span>
</p>
<p>
Y:
<span id="y"></span>
</p>
</div>
Собственно вот анимация (не знаю как правильно назвать её), но необходимо чтобы не кружился, а перемещался в нужном направлении но не переходил за границы.
rotate
иtranslate
не в будут в этом случае конфликтовать?