CSS는 3차원 입체 회전 무한 캐러셀 애니메이션을 구현합니다(코드 예)-CSS 튜토리얼-php.cn

CSS는 3차원 입체 회전 무한 캐러셀 애니메이션을 구현합니다(코드 예)

青灯夜游

풀어 주다： 2018-11-07 18:19:52

원래의

5610명이 탐색했습니다.

이 글은 3차원 회전 무한 캐러셀 애니메이션을 구현하기 위한 CSS를 소개합니다. (코드 예제) 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

이전 글 [CSS로 무한 캐러셀 애니메이션을 구현하는 방법]에서는 수평으로 재생되는 무한 캐러셀 애니메이션을 소개했습니다(아래 그림 참조). 이번 글에서는 이전 글을 기반으로 수정하여 색다른 모습을 구현하겠습니다. 회전 목마. 그림 애니메이션.

CSS는 3차원 입체 회전 무한 캐러셀 애니메이션을 구현합니다(코드 예)

3차원 회전 회전식 회전판

약간만 변경하면 이미지 휠에 다양한 다각형 모양을 사용하거나 더 큰 이미지를 사용하여 다양한 효과를 낼 수 있습니다. 이 경우 이미지는 두 배 더 커지고 공간을 덜 사용하는 삼각형 배열로 배치됩니다. 시퀀스에는 여전히 8개의 동일한 사진이 있습니다.

CSS는 3차원 입체 회전 무한 캐러셀 애니메이션을 구현합니다(코드 예)

Firefox를 사용하면 애니메이션도 실행되는 것을 볼 수 있습니다. 추가 JavaScript 코드와 -webkit을 -moz로 바꾸는 것 외에도 CSS의 #rotator a에 -moz-transform-style:preserve-3d; 를 추가해야 합니다. 파이어폭스 v12) .

이 예시에는 약간의 변화가 있습니다. 사진을 대기열 앞쪽에서 뒤쪽으로 옮깁니다. 전자의 경우 대기열 뒤쪽에서 앞쪽으로 이동합니다.

이를 위해 다음을 변경합니다.

target.insertBefore(arr[arr.length-1], arr[0]);

로그인 후 복사

를

target.appendChild(arr[0]);

로그인 후 복사

아래에 전체 코드를 입력하세요.

html 코드:

<div id="stage3">
<div id="rotator3" style="-webkit-animation-name: rotator3; -moz-animation-name: rotator3;">
<a href="1.jpg"><img  src="1.jpg"    style="max-width:90%" alt="CSS는 3차원 입체 회전 무한 캐러셀 애니메이션을 구현합니다(코드 예)" ></a>
<a href="2.jpg"><img  src="2.jpg"    style="max-width:90%" alt="CSS는 3차원 입체 회전 무한 캐러셀 애니메이션을 구현합니다(코드 예)" ></a>
<a href="3.jpg"><img  src="3.jpg"    style="max-width:90%" alt="CSS는 3차원 입체 회전 무한 캐러셀 애니메이션을 구현합니다(코드 예)" ></a>
<a href="4.jpg"><img  src="4.jpg"    style="max-width:90%" alt="CSS는 3차원 입체 회전 무한 캐러셀 애니메이션을 구현합니다(코드 예)" ></a>
<a href="5.jpg"><img  src="5.jpg"    style="max-width:90%" alt="CSS는 3차원 입체 회전 무한 캐러셀 애니메이션을 구현합니다(코드 예)" ></a>
<a href="6.jpg"><img  src="6.jpg"    style="max-width:90%" alt="CSS는 3차원 입체 회전 무한 캐러셀 애니메이션을 구현합니다(코드 예)" ></a>
<a href="7.jpg"><img  src="7.jpg"    style="max-width:90%" alt="CSS는 3차원 입체 회전 무한 캐러셀 애니메이션을 구현합니다(코드 예)" ></a>
<a href="8.jpg"><img  src="8.jpg"    style="max-width:90%" alt="CSS는 3차원 입체 회전 무한 캐러셀 애니메이션을 구현합니다(코드 예)" ></a>
</div>
</div>

로그인 후 복사

css 코드:

 #stage3 {
    margin: 2em auto 1em 50%;
    height: 240px;
    -webkit-perspective: 1200px;
    -webkit-perspective-origin: 0 90px;
    -moz-perspective: 1200px;
    -moz-perspective-origin: 0 90px;
    -ms-perspective: 1200px;
    -ms-perspective-origin: 0 90px;
  }

  #rotator3 a {
    position: absolute;
    left: -151px;
    -moz-transform-style: preserve-3d;
  }
  #rotator3 a img {
    padding: 10px;
    border: 1px solid #ccc;
    background: #fff;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
  }

  #rotator3 a:nth-of-type(1) img {
    -webkit-transform: rotateX(-90deg) translateZ(100px);
    -moz-transform: rotateX(-90deg) translateZ(100px);
    -ms-transform: rotateX(-90deg) translateZ(100px);
  }
  #rotator3 a:nth-of-type(2) img {
    -webkit-transform: translateZ(100px);
    -moz-transform: translateZ(100px);
    -ms-transform: translateZ(100px);
  }
  #rotator3 a:nth-of-type(3) img {
    -webkit-transform: rotateX(90deg) translateZ(100px);
    -moz-transform: rotateX(90deg) translateZ(100px);
    -ms-transform: rotateX(90deg) translateZ(100px);
  }
  #rotator3 a:nth-of-type(n+4) { display: none; }

  @-webkit-keyframes rotator3 {
    from { -webkit-transform: rotateX(0deg);  }
    to   { -webkit-transform: rotateX(90deg); }
  }
  @-moz-keyframes rotator3 {
    from { -moz-transform: rotateX(0deg);  }
    to   { -moz-transform: rotateX(90deg); }
  }
  @-ms-keyframes rotator3 {
    from { -ms-transform: rotateX(0deg);  }
    to   { -ms-transform: rotateX(90deg); }
  }

  #rotator3 {
    -webkit-transform-origin: 0 101px;
    -webkit-transform-style: preserve-3d;
    -webkit-animation-timing-function: cubic-bezier(1, 0.2, 0.2, 1);
    -webkit-animation-duration: 2s;
    -webkit-animation-delay: 1s;
    -moz-transform-origin: 0 101px;
    -moz-transform-style: preserve-3d;
    -moz-animation-timing-function: cubic-bezier(1, 0.2, 0.2, 1);
    -moz-animation-duration: 2s;
    -moz-animation-delay: 1s;
    -ms-transform-origin: 0 101px;
    -ms-transform-style: preserve-3d;
    -ms-animation-timing-function: cubic-bezier(1, 0.2, 0.2, 1);
    -ms-animation-duration: 2s;
    -ms-animation-delay: 1s;
  }
  #rotator3:hover {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -ms-animation-play-state: paused;
  }

로그인 후 복사

js 코드:

document.addEventListener("DOMContentLoaded", function() {

    var rotateComplete = function(e) {
      with(target.style) {
        webkitAnimationName = MozAnimationName = msAnimationName = "";
      }
      target.insertBefore(arr[arr.length - 1], arr[0]);
      setTimeout(function(el) {
        with(el.style) {
          webkitAnimationName = MozAnimationName = msAnimationName = "rotator3";
        }
      }, 0, target);
    };

    var target = document.getElementById("rotator3");
    var arr = target.getElementsByTagName("a");

    target.addEventListener("webkitAnimationEnd", rotateComplete, false);
    target.addEventListener("animationend", rotateComplete, false);
    target.addEventListener("MSAnimationEnd", rotateComplete, false);

  }, false);

로그인 후 복사

요약: 여기까지입니다. 기사 기사의 전체 내용이 모든 사람의 연구에 도움이 되기를 바랍니다.

위 내용은 CSS는 3차원 입체 회전 무한 캐러셀 애니메이션을 구현합니다(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!