Преобразуйте текст с помощью CSS в трапецию
Я пытаюсь создать эффект, в котором у меня есть 3 строки текста. Текст посередине означает «сейчас». Текст внизу означает «вчера», а текст вверху означает «завтра». «Эффект» заключается в том, что текст находится на барабане, который вращается, отображая «сейчас», а также позволяет зрителю видеть предыдущий и предстоящий текст.
Пример:
Я думаю, что это возможно на основе этого примера в Mozilla (нажмите и перетащите поворот X): https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_transforms
Я пробовал несколько способов, но все они просто уменьшают, увеличивают или искажают текст (делают его курсивом).
P.S. эти вопросы, которые я нашел здесь, касаются только рисования фигур позади текста, а не самого текста.
Редактировать
Поэтому вместо того, чтобы спрашивать более конкретные подробности в комментариях, двое из вас порекомендовали мне закрыть это вместе с отрицательными голосами. Если вы действительно голосуете за такие вещи вместо того, чтобы двигаться дальше, потому что не знаете ответа, то у меня нет для вас ничего.
Однако подтекстом этой близкой причины было:
Вопрос следует обновить, включив в него желаемое поведение, конкретную проблему или ошибку, а также кратчайший код, необходимый для воспроизведения проблемы.
Я продолжу и предоставлю именно их вам.
1: Вопрос следует обновить, включив в него желаемое поведение.
Желаемое поведение заключается в том, что я хочу, чтобы CSS позволял мне изменять форму текста (как показано на изображении выше).
2: Конкретная проблема или ошибка.
Проблема в том, что что бы я ни пытался использовать вращение, оно вращает текст или искажает его, вместо того, чтобы позволить мне изменить «форму» текста. Изменение формы, очевидно, возможно по ссылке, которой я поделился. Однако я не могу понять, как это сделать, поэтому и прошу о помощи.
3: И самый короткий код, необходимый для воспроизведения проблемы.
Честно говоря, никакого кода не было, так что поехали... Это не работает (он сжимает его по вертикали, но верхняя часть текста не сокращается:
<html>
<head>
<style>
body {
background-color:#E7E9EB;
}
#myDIV {
height:300px;
background-color:#FFFFFF;
}
#blueDIV {
position:relative;
width:100px;
padding:10px;
background-color:lightblue;
transform: rotateX(45deg);
}
</style>
</head>
<body>
<h1>The transform property</h1>
<div id = "myDIV">
<div id = "blueDIV">THIS</div>
</div>
</body>
</html>
Ответы 2
Вы можете добиться этого эффекта, используя свойство rotateX для поворота текста по оси X. Но это в изометрии. Чтобы добавить глубину, вам следует применить свойство perspective к родительскому элементу текстовых элементов.
Вот как вы можете это сделать:
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 3rem;
perspective: 200px; /* Adds a 3D perspective effect on the parent*/
}
.rotate-up {
transform: rotateX(30deg); /* Rotates the element 30 degrees along the X-axis */
}
.rotate-down {
transform: rotateX(-30deg); /* Rotate in the opposite direction */
}<div class = "container">
<div class = "rotate-up">Tomorrow</div>
<div>Now</div>
<div class = "rotate-down">Yesterday</div>
</div>Вот лучшее решение:
- используйте
perspectiveна родителе троих детей - поставь
transform-originbottomна первого ребенка - поставил
transform-origintopна третьего ребенка - используйте CSS
rotate, например:45degпо оси X со значениями1(первый дочерний элемент) и-1(третий дочерний элемент)
.words {
font-size: 2rem;
perspective: 1000px; /* add perspective to the parent */
width: max-content;
margin: auto;
> div {
text-align: center;
padding: 1rem;
background: #ddd;
outline: 2px solid red;
&:nth-child(1) {
transform-origin: bottom;
rotate: 1 0 0 45deg; /* x y z angle */
}
&:nth-child(3) {
transform-origin: top;
rotate: -1 0 0 45deg;
}
}
}<div class = "words">
<div>Turn this</div>
<div>into</div>
<div>something</div>
</div>Нет необходимости создавать дополнительные бесполезные обёрточные DIV.
Выглядит великолепно @m-sarabi, спасибо за ответ! Могу я спросить, почему двойные <divs> вокруг «Сейчас»?