시연 동영상 보기

<div class="infinte3dtext">

<div class="box">

  <div class="inner">

    <span>아임웹 코드</span>

  </div>

  <div class="inner">

    <span>아임웹 코드</span>

  </div>

</div>

</div>

<style>

.infinte3dtext {

    height: 500px;

    display: flex;

    align-items: center;

    justify-content: center;

    background-color: 1b1b1b;

}

.box {

    display: flex;

}

.box .inner {

    width: 400px;

    height: 200px;

    line-height: 200px;

    font-size: 4em;

    font-family: sans-serif;

    font-weight: bold;

    white-space: nowrap;

    overflow: hidden;

}

.box .inner:first-child {

    background-color: black;

    color: grey;

    transform-origin: right;

    transform: perspective(100px) rotateY(-15deg);

}

.box .inner:last-child {

    background-color: grey;

    color: antiquewhite;

    transform-origin: left;

    transform: perspective(100px) rotateY(15deg);

}

.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%;

    }

}

</style>