3D Star Wars прокрутка тексту в CSS3

Ефект дуже простий в реалізації. HTML потрібен зовнішній елемент (#titles) та розділ, який буде прокручуватися (#titlecontent):

<div id="titles"><div id="titlecontent">
	<p>content</p>
</div></div>

Зовнішній <div> розміщується внизу в центрі вікна браузера, потім змінює положення з допомогою 3D перспективи, використовуючи перетворення (зверніть увагу, що префікси були опущені, але вони в самому коді):

#titles
{
	position: absolute;
	width: 18em;
	height: 50em;
	bottom: 0;
	left: 50%;
	margin-left: -9em;
	font-size: 350%;
	font-weight: bold;
	text-align: justify;
	overflow: hidden;
	transform-origin: 50% 100%;
	transform: perspective(300px) rotateX(25deg);
}

Псевдо-елемент застосовується для накладення на fade-out градієнт у верхній частині зовнішнього елемента <div>:

#titles:after
{
	position: absolute;
	content: ' ';
	left: 0;
	right: 0;
	top: 0;
	bottom: 60%;
	background-image: linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
	pointer-events: none;
}

Тоді, все, що нам залишається зробити - переглянути вміст за допомогою CSS-анімації:

#titlecontent
{
	position: absolute;
	top: 100%;
	animation: scroll 100s linear 4s infinite;
}
@keyframes scroll {
	0% { top: 100%; }
	100% { top: -170%; }
}

(Примітка: ви можете також використовувати margin-top замість абсолютного позиціонування вмісту, але вигляд трохи не такий.)

Підтримка

Це працює в Chrome, Safari і Firefox. Opera не відтворює 3D transform в поточній версії, але в майбутньому це буде працювати. Internet Explorer до 10 версії не підтримують перетворення та анімацію.

Демо

Джерело