<div id="marquee">
    <div>
        <span>ONE LOVE ONE HEART</span>
    </div>
    <div aria-hidden="true">
        <span>ONE LOVE ONE HEART</span>
    </div>
</div>
@font-face {
  font-family: Agency;
   src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/agency-fb-bold.woff);
}
body { 
  font-family: Avenir, sans-serif;
  marging: 0;
}

#marquee { 
  margin-top: 3rem;
	perspective: 500px;
	font-size: 0;
	font-family: Agency, sans-serif;
}
#marquee div {
	display: inline-block; 
	height: 12rem; 
	width: 20rem;
	position: relative;
}

#marquee div:first-of-type { 
	background: #e5233e;
	transform-origin: top right;
	transform: rotateY(-40deg);
	color: #fff;
}
#marquee div:last-of-type {
	background: #b31e31;
	transform-origin: top left;
	transform: rotateY(45deg);
	color: #f8c9d9;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.