Подскажите как создать такой блок? transform: perspective(..) rotateY(..) дает не тот угол наклона.
-
1tilt.js - посморите– Резидент КазахстанаCommented 20 авг. 2021 в 8:48
-
2gijsroge.github.io/tilt.js– Резидент КазахстанаCommented 20 авг. 2021 в 8:50
-
Почему не тот угол? Через CSS это так и так делается...– Vladimir GoncharCommented 20 авг. 2021 в 11:57
-
получается что здесь перспектива идет слева на право и снизу вверх, а css делает сверху вниз.– Николай МуравьевCommented 20 авг. 2021 в 13:09
-
@НиколайМуравьев у вас там нет перспективы, обычный наклон + градиент = обман зрения. См пример ниже.– xydopeCommented 20 авг. 2021 в 13:54
Добавить комментарий
|
2 ответа
html,
body {
background: #00004d;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.rectangle {
transform: skew(0, -18deg);
position: relative;
display: inline-block;
font-family: Arial;
font-size: 1rem;
line-height: 150%;
font-weight: bold;
letter-spacing: 1px;
}
.rectangle__body {
background: #103d10;
width: 180px;
height: 150px;
border-radius: 20px;
}
.rectangle__body:nth-child(2) {
background: linear-gradient(to right top, #29a329, #71da71);
position: absolute;
top: 40px;
left: 30px;
display: flex;
align-items: center;
}
.rectangle__shadow {
filter: blur(7px);
margin: 0 auto;
width: 120px;
}
.rectangle__label {
color: #ebfaeb;
position: absolute;
width: 130px;
left: 90px;
top: 80px;
}
<div class="rectangle">
<div class="rectangle__body"></div>
<div class="rectangle__body">
<div class="rectangle__shadow">тень на две строки</div>
</div>
<div class="rectangle__label">
Подразделения и сотрудников научных учреждений
</div>
</div>
const rectangleNode = document.querySelector('.rectangle');
window.addEventListener('mousemove', (e) => {
move(e.x, e.y, window.innerWidth, window.innerHeight);
});
function move(eventX, eventY, windowWidth, windowHeight) {
const x = (eventX / windowWidth) * 2 - 1;
const y = (eventY / windowHeight) * 2 - 1;
rectangleNode.style.setProperty('--x', x);
rectangleNode.style.setProperty('--y', y);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
:root {
--transitionTimingFunction: ease;
--transitionDuration: 0.05s;
}
html,
body {
height: 100%;
}
body {
font-family: 'Arial', sans-serif;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(0, 26, 52);
color: white;
overflow: hidden;
}
.rectangle {
--x: 1;
--y: 1;
--maxTranslateX: 20px;
--maxTranslateY: 20px;
--background: linear-gradient(to right top, #29a329, #71da71);
font-size: 18px;
font-weight: 500;
--skewDeg: calc(-18deg * var(--x) * var(--y));
transform: skew(0, var(--skewDeg));
position: relative;
line-height: 1.3;
}
.rectangle__body {
padding: 35px 25px;
background: var(--background);
max-width: 180px;
border-radius: 20px;
position: relative;
z-index: 2;
}
.rectangle__body-shadow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--background);
border-radius: 20px;
z-index: 1;
opacity: 0.3;
--maxTranslateX: 50px;
--maxTranslateY: 50px;
--translateX: calc( (var(--maxTranslateX) * var(--x) + 0px) * -1);
--translateY: calc( (var(--maxTranslateY) * var(--y) + 0px) * -1);
transform: translate3d( var(--translateX), var(--translateY), 0);
}
.rectangle__body-pos-relative {
position: relative;
}
.rectangle__body-text {
position: relative;
z-index: 2;
}
.rectangle__body-text-span {
display: block;
--translateX: calc( var(--maxTranslateX) * var(--x));
--translateY: calc( var(--maxTranslateY) * var(--y));
transform: translate3d( var(--translateX), var(--translateY), 0);
}
.rectangle__body-text-shadow {
position: absolute;
top: 0;
left: 0;
filter: blur(7px);
color: rgba(0, 0, 0, 1);
z-index: 1;
}
<div class="rectangle">
<div class="rectangle__body-shadow">
</div>
<div class="rectangle__body">
<div class="rectangle__body-pos-relative">
<div class="rectangle__body-text">
<span class="rectangle__body-text-span">Подразделения и сотрудников научных учреждений</span>
</div>
<div class="rectangle__body-text-shadow">
Подразделения и сотрудников научных учреждений
</div>
</div>
</div>
</div>
UPD: доработанная версия c плавностью, производительностью(requestAnimationFrame), ресайзом и поддержкой тача
const htmlNode = document.documentElement;
const defaultMouseX = parseFloat(getComputedStyle(htmlNode).getPropertyValue('--mouse-x'));
const defaultMouseY = parseFloat(getComputedStyle(htmlNode).getPropertyValue('--mouse-y'));
let currentX = 0;
let currentY = 0;
let lastCurrentX = 0;
let lastCurrentY = 0;
let targetX = 0;
let targetY = 0;
let targetXPercent = 0;
let targetYPercent = 0;
let animated = false;
const ease = 0.05; // значение, определяющее скорость анимации или изменения координат
window.addEventListener('pointermove', onMove);
window.addEventListener('resize', onResize);
function onResize(e) {
targetX = targetXPercent * window.innerWidth;
targetY = targetYPercent * window.innerHeight;
}
function onMove(e) {
targetX = e.clientX;
targetY = e.clientY;
// это сделано, чтобы не выходить за пределы экрана браузера
targetX = Math.min(Math.max(targetX, 0), window.innerWidth);
targetY = Math.min(Math.max(targetY, 0), window.innerHeight);
// это сделано, чтобы не выходить за пределы экрана браузера
targetXPercent = targetX / window.innerWidth;
targetYPercent = targetY / window.innerHeight;
animated = true;
}
function animate() {
if (animated === false) {
targetX = defaultMouseX * window.innerWidth;
targetY = defaultMouseY * window.innerHeight;
targetXPercent = targetX / window.innerWidth;
targetYPercent = targetY / window.innerHeight;
currentX = targetX;
currentY = targetY;
animated = true;
}
currentX = currentX + ((targetX - currentX) * ease);
currentY = currentY + ((targetY - currentY) * ease);
// преобразуем координаты в диапазон от 0 до 1
let x = currentX / window.innerWidth;
let y = currentY / window.innerHeight;
// округляем до 3 чисел после запятой
x = parseFloat(x.toFixed(3));
y = parseFloat(y.toFixed(3));
// устанавливаем соответствующие CSS-переменные
if (x !== lastCurrentX) {
document.documentElement.style.setProperty('--mouse-x', x);
lastCurrentX = x;
}
if (y !== lastCurrentY) {
document.documentElement.style.setProperty('--mouse-y', y);
lastCurrentY = y;
}
requestAnimationFrame(animate);
}
animate();
*,
*::before,
*::after {
box-sizing: border-box;
}
:root {
/* от 0 до 1 эти CSS переменные */
--mouse-x: 0.2;
--mouse-y: 0.7;
}
html,
body {
height: 100%;
}
body {
margin: 0;
font-family: 'Arial', sans-serif;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(0, 26, 52);
color: white;
overflow: hidden;
touch-action: none;
}
.rectangle {
--borderRadius: 20px;
--background: linear-gradient(to right top, #29a329, #71da71);
/* от -1 до 1 эти CSS переменные */
--x: calc(var(--mouse-x) * 2 - 1);
--y: calc(var(--mouse-y) * 2 - 1);
/* от -1 до 1 эти CSS переменные */
--skewDeg: calc(-18deg * var(--x) * var(--y));
--maxTranslateX: 20px;
--maxTranslateY: 20px;
transform: skew(0, var(--skewDeg));
font-size: 18px;
font-weight: 500;
position: relative;
line-height: 1.3;
max-width: 180px;
}
.rectangle__body-shadow {
--maxTranslateXShadow: calc(var(--maxTranslateX) * 2.5);
--maxTranslateYShadow: calc(var(--maxTranslateY) * 2.5);
--translateX: calc( var(--maxTranslateXShadow) * var(--x) * -1);
--translateY: calc( var(--maxTranslateYShadow) * var(--y) * -1);
transform: translate3d( var(--translateX), var(--translateY), 0);
opacity: 0.3;
border-radius: var(--borderRadius);
background: var(--background);
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.rectangle__body {
padding: 35px 25px;
background: var(--background);
border-radius: var(--borderRadius);
position: relative;
z-index: 2;
}
.rectangle__body-pos-relative {
position: relative;
}
.rectangle__body-text-shadow {
position: absolute;
top: 0;
left: 0;
z-index: 1;
filter: blur(7px);
color: rgba(0, 0, 0, 1);
user-select: none;
cursor: default;
}
.rectangle__body-text {
--translateX: calc( var(--maxTranslateX) * var(--x));
--translateY: calc( var(--maxTranslateY) * var(--y));
position: relative;
z-index: 2;
transform: translate3d( var(--translateX), var(--translateY), 0);
}
<div class="rectangle">
<div class="rectangle__body-shadow"></div>
<div class="rectangle__body">
<div class="rectangle__body-pos-relative">
<div class="rectangle__body-text-shadow">
Подразделения и сотрудников научных учреждений
</div>
<div class="rectangle__body-text">
Подразделения и сотрудников научных учреждений
</div>
</div>
</div>
</div>