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

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

    <div><div>
    
    	<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 версії не підтримують перетворення та анімацію.