Надежно выровняйте один элемент по краю экрана после трансформации
Итак, я пытаюсь создать эффект параллакса в чистом CSS. Это работает довольно хорошо, за исключением того, что мне нужен один параллаксный элемент, который мне нужно надежно закрепить на правом краю области обзора. После перевода и масштабирования это оказывается ... проблематичным. Вы можете увидеть мою упрощенную версию здесь, где синий элемент должен быть напротив правого края экрана.
Я пробовал позиционирование и маржу в нескольких вариантах, но безуспешно. Также пробовал translateX, но это тоже не пуленепробиваемое решение, поскольку, похоже, оно основано на размере элемента.
Самая важная деталь заключается в том, что и синий блок, и бирюзовый блок будут иметь интерактивное содержимое. Синий блок находится сверху (z-index), поэтому бирюзовый блок с контейнером на всю страницу не является проблемой, но я не могу сделать то же самое для синего блока, что, к сожалению, в противном случае решило бы проблему. как я здесь.
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.box{
perspective: 1px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
.main{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
.content{
width:200px;
background:cyan;
margin:0 auto;
height:1200px;
}
.stuck{
height:100px;
width:100px;
background:blue;
position:absolute;
right:0;
top:20%;
transform: translateZ(-4px) scale(5);
}<div class = "box">
<div class = "main"><div class = "content">Test<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />Test</div></div>
<div class = "stuck"></div>
</div>Как мне заставить этот синий блок оставаться в крайнем правом углу, используя только CSS?
Ответы 1
У вас есть 2 разные проблемы, которые вам нужно решить.
Первый, корректирующий преобразование, решается в этом фрагменте (просмотрите его на всю страницу):
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.box{
perspective: 1px;
height: 95vh;
overflow-x: hidden;
overflow-y: auto;
}
.main{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
.content{
width:200px;
background:cyan;
margin:0 auto;
height:95%;
}
.stuck{
height:100px;
width:100px;
background:lightblue;
border: solid 1px blue;
position:absolute;
right:0;
top:20%;
transform: translateX(200vw) translateX(-200%) translateZ(-4px) scale(5);
}<div class = "box">
<div class = "main"><div class = "content">Test<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />Test</div></div>
<div class = "stuck"></div>
</div>Применено 2 исправления
- translateX (-200%) исправляет масштабирование. Поскольку масштаб равен 5, прямоугольник будет на 400% шире, и нам нужно исправить половину этого размера, которая находится с правой стороны.
- translateX (200vw) исправляет перспективный перевод. поскольку значение перспективы равно 1 пикселю, а перемещение по оси Z - 4 пикселя, правая граница, которая была на уровне + 50vw, переместилась на 4 * 50vw = 200vw.
Другая проблема связана с полосой прокрутки, которая появляется, когда содержимое находится выше тела. К сожалению, я не знаю хорошего решения этой проблемы, поскольку ширина полосы прокрутки в разных браузерах не одинакова.