使用 transform:perspective(300px) rotateY(-67.3deg); 

perspective 屬性定義 3D 元素距檢視的距離，與 perspective-origin 屬性一同使用該屬性，就能夠改變 3D 元素的底部位置。

transform-origin 設定旋轉元素的基點

animation: marquee 5s linear infinite;  無限迴圈一個動畫

.box .inner:first-child span{    //對第一個元素的文字進行動畫延時
  animation-delay:2.5s;

CSS程式碼：

html,body {
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

body{
  background-color:#F8B595;
}

.box {
  display:flex;
}

.box .inner{
  width:200px;
  height:100px;
  line-height:100px;
  font-size:2em;
  font-family:sans-serif;
  font-weight:bold;
  white-space:nowrap;
  overflow:hidden;
}

.box .inner:first-child {
  background-color:#F67280;
  color:#681A1E;
  transform-origin:left;
  transform:perspective(300px) rotateY(-67.3deg);
}

.box .inner:last-child {
  background-color:#FFB6B9;
  color:#FBF2D5;
  transform-origin:right;
  transform:perspective(300px) rotateY(67.3deg);
}

.box .inner span{
  position:absolute;
  animation: marquee 5s linear infinite;
}

.box .inner:first-child span{
  animation-delay:2.5s;
  left:-100%;
}

@keyframes marquee {
  from{
    left:100%;
  }  
  to {
    left:-100%;
  }
}
 

HTML程式碼：、

<div class="box">
  <div class="inner">
    <span>Hello World</span>
  </div>
  <div class="inner">               
    <span>Hello World</span>
  </div>
</div>