집 >웹 프론트엔드 >CSS 튜토리얼 >scc3 3d 기술로 플레이하는 방법을 가르쳐주세요

scc3 3d 기술로 플레이하는 방법을 가르쳐주세요

伊谢尔伦원래의: 2017-02-03 13:48:252403검색

CSS3에서 3D를 다루려면 원근감, 회전 및 이동과 같은 몇 가지 단어를 이해해야 합니다. 관점이란 3D 효과를 보여주기 위해 화면상의 2D 사물을 현실적인 관점에서 보는 것을 의미합니다. 회전은 더 이상 2D 평면에서의 회전이 아니라 X축, Y축, Z축의 회전을 포함하는 3차원 좌표계의 회전입니다. 패닝도 마찬가지다.

물론 이론적으로 설명하겠지만 아직 이해가 안 되실 수도 있겠네요. 아래는 gif 3개입니다.

X축을 따라 회전

scc3 3d 기술로 플레이하는 방법을 가르쳐주세요

Y축을 따라 회전

scc3 3d 기술로 플레이하는 방법을 가르쳐주세요

Z축을 따라 회전

scc3 3d 기술로 플레이하는 방법을 가르쳐주세요

회전에는 문제가 없어야 번역, 즉 X축, Y축을 따라 회전하는 것이 더 이해하기 쉬울 것입니다. 축, z축이 움직입니다.

원근법은 이해하기 어렵다고 말할 수도 있습니다. 원근법의 몇 가지 속성을 소개하겠습니다.

perspective

perspective의 영어 이름은spective입니다. 이것이 없으면 3D 효과를 만들 수 없습니다. 그런데 이것이 어떻게 우리 브라우저에서 3D 효과를 만들 수 있습니까? 다음 사진을 보시면 됩니다. 사실 회화를 공부해본 사람이라면 원근법의 관계를 알아야 하는데 이것이 사실입니다.

scc3 3d 기술로 플레이하는 방법을 가르쳐주세요

그런데 CSS에는 숫자 값이 있습니다. 예를 들어 관점: 1000px은 무엇을 의미하나요? 이렇게 이해할 수 있는데, 어떤 물체를 직접 보면 그 물체가 엄청나게 커져서 우리의 시야를 차지하게 되고, 그 물체로부터 멀어질수록 그 물체는 작아지고 입체감이 생기게 됩니다. 사실 이런 수치적 구조는 우리의 눈과 화면 사이의 거리를 결정함으로써 가상의 3D 환상이 구성되는 것입니다.

perspective-origin

위에서 원근법을 이해하고, 이 원점이 무엇인지 추가하면 앞서 언급한 것이 눈과 사물 사이의 거리인데, 이것이 시선입니다. 관점의 다양한 위치에 따라 우리가 보는 다양한 장면이 결정됩니다. 기본값은 원점(perspective-origin)인 50% 50%입니다. 두 번째 요소는 y축에 정의됩니다.

요소에 대해spective-origin 속성이 정의되면 요소 자체가 아닌 해당 하위 요소가 관점 효과를 얻습니다. Perspective 속성과 함께 사용해야 하며 3D 변환 요소에만 영향을 미칩니다.

scc3 3d 기술로 플레이하는 방법을 가르쳐주세요

transform-style

관점은 CSS에서 3D의 핵심입니다. 요소에 3D 효과를 적용하려면 기본 변형 스타일이 필요합니다. , 그냥 변환 스타일: Preserve-3D를 사용해야 합니다. 그렇지 않으면 3D 변환이 아닌 평면 변환만 됩니다.

위의 개념을 어느 정도 이해했으니 실제 연습을 시작하겠습니다!

첫 번째 단계: html 구조

아주 간단한 컨테이너가 6개의 조각이 들어 있는 조각 상자를 포장합니다

<div class="container">    
    <div class="piece-box">
        <div class="piece piece-1"></div>
        <div class="piece piece-2"></div>
        <div class="piece piece-3"></div>
        <div class="piece piece-4"></div>
        <div class="piece piece-5"></div>
        <div class="piece piece-6"></div>
    </div>
</div>

두 번째 단계: 필요한 3D 속성 추가 3D 세계로 들어가세요

위의 설명을 통해 원근법에 익숙해져야 합니다

/*容器*/
.container {    
    -webkit-perspective: 1000px;    
    -moz-perspective: 1000px;    
    -ms-perspective: 1000px;    
    perspective: 1000px;
}
/*piece盒子*/
 .piece-box {        
      perspective-origin: 50% 50%;        
      -webkit-transform-style: preserve-3d;        
      -moz-transform-style: preserve-3d;       
      -ms-transform-style: preserve-3d;        
      transform-style: preserve-3d;
}

第三步：加入必要的样式

/*容器*/
.container {    
    -webkit-perspective: 1000px;    
    -moz-perspective: 1000px;    
    -ms-perspective: 1000px;    
    perspective: 1000px;
}
/*piece盒子*/
.piece-box {    
     position: relative;    
     width: 200px;    
     height: 200px;    
     margin: 300px auto;    
     perspective-origin: 50% 50%;    
     -webkit-transform-style: preserve-3d;    
     -moz-transform-style: preserve-3d;    
     -ms-transform-style: preserve-3d;    
     transform-style: preserve-3d;
}
/*piece通用样式*/
.piece {    
    position: absolute;    
    width: 200px;    
    height: 200px;    
    background: red;    
    opacity: 0.5;
}
.piece-1 {    
   background: #FF6666;
}
.piece-2 {    
    background: #FFFF00;
}
.piece-3 {    
    background: #006699;
}
.piece-4 {    
    background: #009999;
}
.piece-5 {    
    background: #FF0033;
}
.piece-6 {    
    background: #FF6600;
}

当然，在你完成这步之后你还是只看到一个正方形，也就是我们的piece-6,因为我们的3Dtransform还没开始

scc3 3d 기술로 플레이하는 방법을 가르쳐주세요

第四步：3D变换来袭

首先是实现走马灯，我们先不要让它走，先实现灯部分。

如何实现呢？因为要构成一个圆，圆是360度，而我们有6个piece，那么，很容易想到，我们需要把每一个piece以递增60度的方式rotateY，就变成如下

scc3 3d 기술로 플레이하는 방법을 가르쳐주세요

如何把他们从中心拉开呢？

这里我们还要注意一点，在我们使元素绕Y轴旋转以后，其实X轴和Z轴也会跟着旋转，所所以正方体的每个面的垂直线还是Z轴，我们就只需要改变下translateZ的值,而当translateZ为正的时候，就朝着我们的方向走来，这样就可以拉开了

但是拉开的距离如何衡量？

scc3 3d 기술로 플레이하는 방법을 가르쳐주세요

是不是一目了然了~

下面我们再修改下css

.piece-1 {    
    background: #FF6666;    
    -webkit-transform: rotateY(0deg) translateZ(173.2px);    
    -ms-transform: rotateY(0deg) translateZ(173.2px);    
    -o-transform: rotateY(0deg) translateZ(173.2px);    
    transform: rotateY(0deg) translateZ(173.2px);

}
.piece-2 {    
    background: #FFFF00;    
    -webkit-transform: rotateY(60deg) translateZ(173.2px);    
    -ms-transform: rotateY(60deg) translateZ(173.2px);    
    -o-transform: rotateY(60deg) translateZ(173.2px);    
    transform: rotateY(60deg) translateZ(173.2px);
}
.piece-3 {    
    background: #006699;    
    -webkit-transform: rotateY(120deg) translateZ(173.2px);    
    -ms-transform: rotateY(120deg) translateZ(173.2px);    
    -o-transform: rotateY(120deg) translateZ(173.2px);    
    transform: rotateY(120deg) translateZ(173.2px);
}
.piece-4 {    
    background: #009999;    
    -webkit-transform: rotateY(180deg) translateZ(173.2px);    
    -ms-transform: rotateY(180deg) translateZ(173.2px);    
    -o-transform: rotateY(180deg) translateZ(173.2px);    
    transform: rotateY(180deg) translateZ(173.2px);
}
.piece-5 {    
    background: #FF0033;    
    -webkit-transform: rotateY(240deg) translateZ(173.2px);    
    -ms-transform: rotateY(240deg) translateZ(173.2px);    
    -o-transform: rotateY(240deg) translateZ(173.2px);    
    transform: rotateY(240deg) translateZ(173.2px);
}
.piece-6 {    
    background: #FF6600;    
    -webkit-transform: rotateY(300deg) translateZ(173.2px);    
    -ms-transform: rotateY(300deg) translateZ(173.2px);    
    -o-transform: rotateY(300deg) translateZ(173.2px);    
    transform: rotateY(300deg) translateZ(173.2px);
}

是不是已经实现了走马灯了？

scc3 3d 기술로 플레이하는 방법을 가르쳐주세요

第五步：animation让3D动起来

要实现走马灯动，其实很简单，我们只要在piece-box上加上旋转动画就行了,5s完成动画，从0度旋转到360度

/*piece盒子*/
.piece-box {    
    position: relative;    
    width: 200px;    
    height: 200px;    
    margin: 300px auto;    
    perspective-origin: 50% 50%;    
    -webkit-transform-style: preserve-3d;    
    -moz-transform-style: preserve-3d;    
    -ms-transform-style: preserve-3d;    
    transform-style: preserve-3d;    
    animation: pieceRotate 5s;    
    -moz-animation: pieceRotate 5s; /* Firefox */
    -webkit-animation: pieceRotate 5s; /* Safari and Chrome */
    -o-animation: pieceRotate 5s ; /* Opera */
}
/*走马灯动画*/
@keyframes pieceRotate
{
0%   {-webkit-transform: rotateY(0deg);        
         -ms-transform: rotateY(0deg);        
         -o-transform: rotateY(0deg);        
         transform: rotateY(0deg);}
100% {-webkit-transform: rotateY(360deg);        
       -ms-transform: rotateY(360deg);        
       -o-transform: rotateY(360deg);        
       transform: rotateY(360deg);}
}
/* Firefox */
@-moz-keyframes pieceRotate
{
0%   {-webkit-transform: rotateY(0deg);        
         -ms-transform: rotateY(0deg);        
         -o-transform: rotateY(0deg);        
         transform: rotateY(0deg);}
100% {-webkit-transform: rotateY(360deg);        
       -ms-transform: rotateY(360deg);        
       -o-transform: rotateY(360deg);        
       transform: rotateY(360deg);}
}
/* Safari and Chrome */
@-webkit-keyframes pieceRotate
{
0%   {-webkit-transform: rotateY(0deg);        
         -ms-transform: rotateY(0deg);        
         -o-transform: rotateY(0deg);        
         transform: rotateY(0deg);}
100% {-webkit-transform: rotateY(360deg);        
       -ms-transform: rotateY(360deg);        
       -o-transform: rotateY(360deg);        
       transform: rotateY(360deg);}
}
/* Opera */
@-o-keyframes pieceRotate
{
0%   {-webkit-transform: rotateY(0deg);        
         -ms-transform: rotateY(0deg);        
         -o-transform: rotateY(0deg);        
         transform: rotateY(0deg);}
100% {-webkit-transform: rotateY(360deg);        
       -ms-transform: rotateY(360deg);        
       -o-transform: rotateY(360deg);        
       transform: rotateY(360deg);}
}

还没结束哦~更酷炫的正方体组装

正方体，其实也不难实现，我这里就不很详细说了，你首先可以想象一个面，然后去拓展其他面如何去实现，比如我们把正方体的前面translateZ(100px）让它靠近我们100px,然后后面translateZ(-100px）让它远离我们100px,左边是先translateX(-100px再rotateY(90deg),右边就是translateX(100px)再rotateY(90deg),上面是先translateY(-100px)，rotateX(90deg)，下面是先translateY(100px)，rotateX(90deg)，只要我们写进动画，一切就大功告成。

css就为如下，以下就只放piece1，其他读者可以自己类比实现

.piece-1 {     
     background: #FF6666;     
     -webkit-transform: rotateY(0deg) translateZ(173.2px);     
     -ms-transform: rotateY(0deg) translateZ(173.2px);     
     -o-transform: rotateY(0deg) translateZ(173.2px);     
     transform: rotateY(0deg) translateZ(173.2px);     
     animation: piece1Rotate 5s 5s;     
     -moz-animation: piece1Rotate 5s 5s; /* Firefox */
     -webkit-animation: piece1Rotate 5s 5s; /* Safari and Chrome */
     -o-animation: piece1Rotate 5s 5s; /* Opera */
     -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
      animation-fill-mode: forwards;
 }
 /*front*/
 @keyframes piece1Rotate
 {
 0%   {-webkit-transform: rotateY(0deg) translateZ(173.2px);     
       -ms-transform: rotateY(0deg) translateZ(173.2px);     
       -o-transform: rotateY(0deg) translateZ(173.2px);     
       transform: rotateY(0deg) translateZ(173.2px);}
 100% {-webkit-transform: rotateY(0deg)  translateZ(100px);     
       -ms-transform:  rotateY(0deg) translateZ(100px);     
       -o-transform: rotateY(0deg)  translateZ(100px);     
       transform:  rotateY(0deg) translateZ(100px);}
 }
  /* Firefox */
 @-moz-keyframes piece1Rotate
 {
 0%   {-webkit-transform: rotateY(0deg) translateZ(173.2px);     
       -ms-transform: rotateY(0deg) translateZ(173.2px);     
       -o-transform: rotateY(0deg) translateZ(173.2px);     
       transform: rotateY(0deg) translateZ(173.2px);}
 100% {-webkit-transform: rotateY(0deg)  translateZ(100px);     
       -ms-transform:  rotateY(0deg) translateZ(100px);     
       -o-transform: rotateY(0deg)  translateZ(100px);     
       transform:  rotateY(0deg) translateZ(100px);}
 }
  /* Safari and Chrome */
 @-webkit-keyframes piece1Rotate
 {
 0%   {-webkit-transform: rotateY(0deg) translateZ(173.2px);     
       -ms-transform: rotateY(0deg) translateZ(173.2px);     
       -o-transform: rotateY(0deg) translateZ(173.2px);     
       transform: rotateY(0deg) translateZ(173.2px);}
 100% {-webkit-transform: rotateY(0deg)  translateZ(100px);     
       -ms-transform:  rotateY(0deg) translateZ(100px);     
       -o-transform: rotateY(0deg)  translateZ(100px);     
       transform:  rotateY(0deg) translateZ(100px);}
 }
  /* Opera */
 @-o-keyframes piece1Rotate
 {
 0%   {-webkit-transform: rotateY(0deg) translateZ(173.2px);     
       -ms-transform: rotateY(0deg) translateZ(173.2px);     
       -o-transform: rotateY(0deg) translateZ(173.2px);     
       transform: rotateY(0deg) translateZ(173.2px);}
 100% {-webkit-transform: rotateY(0deg)  translateZ(100px);     
       -ms-transform:  rotateY(0deg) translateZ(100px);     
       -o-transform: rotateY(0deg)  translateZ(100px);     
       transform:  rotateY(0deg) translateZ(100px);}
 }

细心的读者可以发现我用了一个animation-fill-mode: forwards;,这个其实就是让这些piece保持动画最后的效果，也就是正方体的效果，读者可以不加试试看，那还是会恢复原样。

最后就是正方体的旋转了，前面我们的容器已经用过animation了,读者可能会想我再加个class放animaiton不就行了，hhh，animaiton会覆盖掉前面的，那前面的走马灯的动画就没了，所以在html结构中，我再加了一个box包裹piece, 如下

<div class="container">
    <div class="piece-box">
        <div class="piece-box2"><!--新加的容器-->
            <div class="piece piece-1"></div>
            <div class="piece piece-2"></div>
            <div class="piece piece-3"></div>
            <div class="piece piece-4"></div>
            <div class="piece piece-5"></div>
            <div class="piece piece-6"></div>
        </div>
    </div>
</div>

在动画上我们可以控制正方体动画的延时时间，就是等到正方体组装完成后再开始动画

animation: boxRotate 5s 10s infinite;第一个5s是动画时长，第二个10s是延时时间，然后我们让正方体的旋转，绕X轴从0度到360度,绕Y轴也0到Y轴360度。

.piece-box2 {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    animation: boxRotate 5s 10s infinite;
    -moz-animation: boxRotate 5s 10s infinite; /* Firefox */
    -webkit-animation: boxRotate 5s 10s infinite; /* Safari and Chrome */
    -o-animation: boxRotate 5s 10s infinite; /* Opera */
}
/*正方体旋转动画*/
@keyframes boxRotate
{
0%   {-webkit-transform: rotateX(0deg) rotateY(0deg););
    -ms-transform: rotateX(0deg) rotateY(0deg););
    -o-transform: rotateX(0deg) rotateY(0deg););
    transform: rotateX(0deg) rotateY(0deg););}
100% {-webkit-transform: rotateX(360deg) rotateY(360deg);
    -ms-transform: rotateX(360deg) rotateY(360deg);
    -o-transform: rotateX(360deg) rotateY(360deg);
    transform: rotateX(360deg) rotateY(360deg);}
}
/* Firefox */
@-moz-keyframes boxRotate
{
0%   {-webkit-transform: rotateX(0deg) rotateY(0deg););
    -ms-transform: rotateX(0deg) rotateY(0deg););
    -o-transform: rotateX(0deg) rotateY(0deg););
    transform: rotateX(0deg) rotateY(0deg););}
100% {-webkit-transform: rotateX(360deg) rotateY(360deg);
    -ms-transform: rotateX(360deg) rotateY(360deg);
    -o-transform: rotateX(360deg) rotateY(360deg);
    transform: rotateX(360deg) rotateY(360deg);}
}
/* Safari and Chrome */
@-webkit-keyframes boxRotate
{
0%   {-webkit-transform: rotateX(0deg) rotateY(0deg););
    -ms-transform: rotateX(0deg) rotateY(0deg););
    -o-transform: rotateX(0deg) rotateY(0deg););
    transform: rotateX(0deg) rotateY(0deg););}
100% {-webkit-transform: rotateX(360deg) rotateY(360deg);
    -ms-transform: rotateX(360deg) rotateY(360deg);
    -o-transform: rotateX(360deg) rotateY(360deg);
    transform: rotateX(360deg) rotateY(360deg);}
}
/* Opera */
@-o-keyframes boxRotate
{
0%   {-webkit-transform: rotateX(0deg) rotateY(0deg););
    -ms-transform: rotateX(0deg) rotateY(0deg););
    -o-transform: rotateX(0deg) rotateY(0deg););
    transform: rotateX(0deg) rotateY(0deg););}
100% {-webkit-transform: rotateX(360deg) rotateY(360deg);
    -ms-transform: rotateX(360deg) rotateY(360deg);
    -o-transform: rotateX(360deg) rotateY(360deg);
    transform: rotateX(360deg) rotateY(360deg);}
}

最后效果，大功告成！

scc3 3d 기술로 플레이하는 방법을 가르쳐주세요

성명：

이전 기사：CSS 팁: CSS의 난수다음 기사：CSS 팁: CSS의 난수

scc3 3d 기술로 플레이하는 방법을 가르쳐주세요

관련 기사