css+js는 수직 회전 전환 슬라이드 애니메이션 효과를 구현합니다(코드 포함).

이 글의 내용은 CSS+JS를 사용하여 간단한 페이드 슬라이드 애니메이션 효과를 구현하는 것입니다(코드 포함). 필요한 친구들이 참고할 수 있기를 바랍니다.

이제 코드를 통해 단계별로 슬라이드의 수직 회전 전환 애니메이션 효과를 구현하겠습니다.

1 html 파일을 만들고 데모를 작성합니다.

먼저 페이지에 이미지 목록을 설정하고 포함해야 합니다. div 상자에 있습니다. 다음과 같습니다.

<div id="stage">
	<div id="rotator" style="-webkit-animation-name: rotator; -moz-animation-name: rotator;">
		<a href="1.jpg"><img  src="img/1.jpg"    style="max-width:90%"  style="max-width:90%" alt="css+js는 수직 회전 전환 슬라이드 애니메이션 효과를 구현합니다(코드 포함)." ></a>
		<a href="2.jpg"><img  src="img/2.jpg"    style="max-width:90%"  style="max-width:90%" alt="css+js는 수직 회전 전환 슬라이드 애니메이션 효과를 구현합니다(코드 포함)." ></a>
		<a href="3.jpg"><img  src="img/3.jpg"    style="max-width:90%"  style="max-width:90%" alt="css+js는 수직 회전 전환 슬라이드 애니메이션 효과를 구현합니다(코드 포함)." ></a>
		<a href="4.jpg"><img  src="img/4.jpg"    style="max-width:90%"  style="max-width:90%" alt="css+js는 수직 회전 전환 슬라이드 애니메이션 효과를 구현합니다(코드 포함)." ></a>
		<a href="5.jpg"><img  src="img/5.jpg"    style="max-width:90%"  style="max-width:90%" alt="css+js는 수직 회전 전환 슬라이드 애니메이션 효과를 구현합니다(코드 포함)." ></a>
		<a href="6.jpg"><img  src="img/6.jpg"    style="max-width:90%"  style="max-width:90%" alt="css+js는 수직 회전 전환 슬라이드 애니메이션 효과를 구현합니다(코드 포함)." ></a>
		<a href="7.jpg"><img  src="img/7.jpg"    style="max-width:90%"  style="max-width:90%" alt="css+js는 수직 회전 전환 슬라이드 애니메이션 효과를 구현합니다(코드 포함)." ></a>
		<a href="8.jpg"><img  src="img/8.jpg"    style="max-width:90%"  style="max-width:90%" alt="css+js는 수직 회전 전환 슬라이드 애니메이션 효과를 구현합니다(코드 포함)." ></a>
	</div>
</div>

인라인 스타일 @keyframes 속성은 아래 애니메이션을 참조합니다. JavaScript를 사용하여 애니메이션을 중지하고 다시 시작할 수 있도록 CSS가 아닌 인라인이어야 합니다.

2. CSS를 사용하여 이미지를 오버레이하고 3D 공간에서 사진을 정렬합니다.

CSS 스타일을 사용하여 사진이 수직 방향으로 전환되도록

  #stage {
    margin: 5em 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;
  }

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

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

3 애니메이션 효과를 추가합니다. 3D 전환 효과

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

  #rotator {
    -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;
  }
  #rotator:hover {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -ms-animation-play-state: paused;
  }

4. JavaScript로 애니메이션 컨트롤러 추가

  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 = "rotator";
        }
      }, 0, target);
    };

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

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

  }, false);

5. 효과 표시

요약

: 위 내용이 이 글의 전체 내용입니다. 다들 배우고 있어요 .

추천 관련 기사:

3차원 입체 회전 무한 캐러셀 애니메이션을 구현하는 CSS

css+js로 슬라이드에 텍스트를 추가하는 방법은 무엇인가요? 슬라이드 회전 전환 실현

위 내용은 css+js는 수직 회전 전환 슬라이드 애니메이션 효과를 구현합니다(코드 포함).의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!