3D animation

I watch YouTube tutorial video https://youtube.com/watch?v=NSWr6dkc_Xw&t=418s and try to make a 3D animation while copying it exactly as it is.
I was able to get to a certain point smoothly.The html and scss that have been completed are as follows.
html

<div class="banner">
       <div class="panel"></div>
       <div class="panel"></div>
       <div class="panel"></div>
       <div class="panel"></div>
       <div class="panel"></div>
       <div class="panel"></div>
       <div class="panel"></div>
       <div class="panel"></div>
       <div class="panel"></div>
       <div class="panel"></div>
       <div class="panel"></div>
       <div class="panel"></div>
       <div class="panel"></div>
       <div class="panel"></div>
       <div class="panel"></div>
       <div class="panel"></div>
       <div class="panel"></div>
       <div class="panel"></div>
       <div class="panel"></div>
       <div class="panel"></div>
       <div class="panel"></div>
       <div class="panel"></div>
       <div class="panel"></div>
       <div class="panel"></div>
   </div>

scss

body{
    background-color:#000;
    color:#fff;
    min-height: 100vh;
    display:grid;
    place-items:center;
  
}

US>.banner{
    display:flex;
}
$width: 23px;
US>.panel{
    position:relative;
    width —$width;
    height —110px;
  // border —1px solid white;
   overflow — hidden;
   animation:rotate6s infinite ease-in-out;
}

@keyframesrotate{
    from {transform:rotateX(0deg);}
    to {transform:rotateX (360 deg);}
}

.panel::before{
    position:absolute;
    left: var(--left);
    content: 'Hello World';
    font-size —96px;
    width —max-content;
    color: hsl(var(--hue), 75%, 75%);
}

@ for $if from 0 to 24 {
    .panel:nth-child(#{$i+1}){
        --left:# {$width*$i*-1};
        --hue:#{360/24*$i};
}
}

From here, around 16:00 in the video, the last part of the body is

 perspective:500px;

If you write it down, it will be three-dimensional, but if I write it down, nothing will change.

I am using Windows 10.When you show it on the monitor, no matter whether you try chrome, edge, or Firefox, nothing changes.
What's wrong?
Thank you for your cooperation.

css scss

2022-09-30 14:45

1 Answers

Add transform-style:preserve-3d; to .banner.

.banner{
  display:flex;
  transform-style:preserve-3d;
}

perspective requires creating a 3D rendering context using preserve-3d.

https://developer.mozilla.org/ja/docs/Web/CSS/transform-style

transform-style is a property of the CSS that sets whether a child element of an element should be placed in a 3D space or flattened and placed in a plane of the element.

https://drafts.csswg.org/css-transforms-2/#3d-rendering-contexts

A3D rendering context is established by a transformable element where used value for transform-styleis preserve-3d and which is not part of a 3D rendering context.Anlement that establish a 3D rendering context.

The finished product https://codepen.io/kevinpowell/pen/abwqBxE referenced in the original video is not working well right now, and I haven't looked into it properly, but it seems that the behavior of the browser has changed since the video was released.

2022-09-30 14:45

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656