<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>3D Marquee Effect</title> <style> html,body{ height: 400px; background: #a144ff; } .box{ display: flex; margin-top: 200px; } .inner{ width: 1000px; height: 240px; line-height: 200px; font-size: 6em; font-family: sans-serif; font-weight: 800; white-space: nowrap; overflow: hidden; box-shadow: 4px 6px 8px rgba(0, 0, 0, 0.5); } .inner:first-child{ background: indianred; color: #f1f1f1; transform-origin: right; transform: perspective(100px) rotateY(-15deg); } .inner:last-child{ background: lightcoral; color: #ff0; transform-origin: left; transform: perspective(100px) rotateY(15deg); } .inner span{ position: absolute; animation: marquee 5s linear infin