집 >백엔드 개발 >PHP 튜토리얼 >CSS3를 사용하여 마우스가 이미지 위로 슬라이드할 때 방향을 감지하는 멋진 3D 애니메이션을 만드는 방법

CSS3를 사용하여 마우스가 이미지 위로 슬라이드할 때 방향을 감지하는 멋진 3D 애니메이션을 만드는 방법

不言원래의: 2018-06-21 17:01:261703검색

이 글에서는 주로 CSS3를 사용하여 방향 감지 기능이 있는 사진 위에 마우스를 놓는 멋진 3D 애니메이션을 만드는 방법을 자세히 소개합니다. 이는 특정 참고 가치가 있으며 관심 있는 친구들이 참고할 수 있습니다. 이것은 CSS3와 약간의 JS를 사용하여 마우스가 그림 위로 미끄러지는 방향을 감지하는 멋진 3D 애니메이션 특수 효과입니다. 특수 효과에서 사용자의 마우스가 그리드의 그림 위로 미끄러지면 그리드의 콘텐츠 마스크 레이어에 3D 뒤집기 애니메이션이 나타나고 방향 감지 기능이 있어 마우스 입력 방향에서 뒤집기 시작할 수 있습니다. 효과는 매우 멋지다.

온라인 미리보기 소스코드 다운로드

사용방법

HTML 구조

방향 감지 마우스 슬라이드 애니메이션의 HTML 구조는 정렬되지 않은 목록의 HTML 구조를 사용하여 그리드 레이아웃을 만듭니다. , 각 < The ;li> 요소는 그리드입니다. 각 그리드는 실제로 그림의 작은 아이콘인 486d7a50595533609bc98d44595dc670 요소를 자리 표시자로 사용합니다. 또한 p.info는 3D로 반전되는 마스크 레이어입니다.

<p class=&#39;container&#39;>  
  <ul>  
    <li>  
      <a class=&#39;normal&#39; href=&#39;#&#39;>  
        <svg viewBox=&#39;0 0 80 76&#39; x=&#39;0px&#39; y=&#39;0px&#39;>  
          <g>  
            <path d=&#39;M 68.9708 24.8623 L 60.4554 2.3018 ...... 68.0625 Z&#39;></path>  
          </g>  
        </svg>  
      </a>  
      <p class=&#39;info&#39;>  
        <h3>...</h3>  
        <p>....</p>  
      </p>  
    </li>  
    ......   
  </ul>  
</p>

CSS 스타일

전체 그리드 레이아웃은 순서가 지정되지 않은 목록을 사용하여 만들어지며 모든 li 요소는 부동 상태로 유지됩니다.

ul {   
  padding: 0;   
  margin: 0 0 50px;   
}   
ul:after {   
  content: "";   
  display: table;   
  clear: both;   
}   
    
li {   
  position: relative;   
  float: left;   
  width: 200px;   
  height: 200px;   
  margin: 5px;   
  padding: 0;   
  list-style: none;   
}   
li a {   
  display: inline-block;   
  vertical-align: top;   
  text-decoration: none;   
  border-radius: 4px;   
}

동시에 3D 효과를 생성하려면 각 li 요소에 원근감 속성을 추가하세요.

li {   
  -webkit-perspective: 400px;   
          perspective: 400px;   
}

3D 반전을 만드는 데 사용되는 마스크 레이어 p.info는 기본적으로 왼쪽 위 모서리부터 시작하여 절대 위치 지정을 사용하여 너비 100%, 높이 100%로 설정됩니다. 그런 다음 Rotate3d() 함수를 사용하여 X축을 따라 시계 방향으로 90도 회전하여 보이지 않게 만듭니다.

.info {   
  -webkit-transform: rotate3d(1, 0, 0, 90deg);   
          transform: rotate3d(1, 0, 0, 90deg);   
  width: 100%;   
  height: 100%;   
  padding: 20px;   
  position: absolute;   
  top: 0;   
  left: 0;   
  border-radius: 4px;   
  pointer-events: none;   
  background-color: rgba(26, 188, 156, 0.9);   
}

마지막으로 CSS 스타일에는 위, 아래, 왼쪽, 오른쪽 네 방향에서 마우스가 들어오고 나갈 때 클래스가 미리 설정되어 있습니다. 이 클래스는 JavaScript를 사용하여 마우스가 들어갈 때 방향을 감지합니다. 마우스가 그리드에 들어간 다음 해당 클래스 클래스를 추가합니다.

.in-top .info {   
  -webkit-transform-origin: 50% 0%;   
          transform-origin: 50% 0%;   
  -webkit-animation: in-top 300ms ease 0ms 1 forwards;   
          animation: in-top 300ms ease 0ms 1 forwards;   
}   
    
.in-rightright .info {   
  -webkit-transform-origin: 100% 0%;   
          transform-origin: 100% 0%;   
  -webkit-animation: in-rightright 300ms ease 0ms 1 forwards;   
          animation: in-rightright 300ms ease 0ms 1 forwards;   
}   
    
.in-bottombottom .info {   
  -webkit-transform-origin: 50% 100%;   
          transform-origin: 50% 100%;   
  -webkit-animation: in-bottombottom 300ms ease 0ms 1 forwards;   
          animation: in-bottombottom 300ms ease 0ms 1 forwards;   
}   
    
.in-left .info {   
  -webkit-transform-origin: 0% 0%;   
          transform-origin: 0% 0%;   
  -webkit-animation: in-left 300ms ease 0ms 1 forwards;   
          animation: in-left 300ms ease 0ms 1 forwards;   
}   
    
.out-top .info {   
  -webkit-transform-origin: 50% 0%;   
          transform-origin: 50% 0%;   
  -webkit-animation: out-top 300ms ease 0ms 1 forwards;   
          animation: out-top 300ms ease 0ms 1 forwards;   
}   
    
.out-rightright .info {   
  -webkit-transform-origin: 100% 50%;   
          transform-origin: 100% 50%;   
  -webkit-animation: out-rightright 300ms ease 0ms 1 forwards;   
          animation: out-rightright 300ms ease 0ms 1 forwards;   
}   
    
.out-bottombottom .info {   
  -webkit-transform-origin: 50% 100%;   
          transform-origin: 50% 100%;   
  -webkit-animation: out-bottombottom 300ms ease 0ms 1 forwards;   
          animation: out-bottombottom 300ms ease 0ms 1 forwards;   
}   
    
.out-left .info {   
  -webkit-transform-origin: 0% 0%;   
          transform-origin: 0% 0%;   
  -webkit-animation: out-left 300ms ease 0ms 1 forwards;   
          animation: out-left 300ms ease 0ms 1 forwards;   
}

JavaScript

이 특수 효과는 JavaScript를 사용하여 마우스가 그리드에 들어가는 방향을 가져오고 해당 그리드 애니메이션에 해당 클래스를 추가합니다. getDirection() 함수는 방향 함수입니다.

var getDirection = function (ev, obj) {   
    var w = obj.offsetWidth,    
        h = obj.offsetHeight,    
        x = ev.pageX - obj.offsetLeft - w / 2 * (w > h ? h / w : 1),    
        y = ev.pageY - obj.offsetTop - h / 2 * (h > w ? w / h : 1),    
        d = Math.round(Math.atan2(y, x) / 1.57079633 + 5) % 4;   
    return d;   
};

그런 다음 모든 li 요소를 순회하고 마우스 입력 방향에 해당 클래스를 추가합니다.

var nodes = document.querySelectorAll(&#39;li&#39;),   
    _nodes = [].slice.call(nodes, 0);   
var addClass = function (ev, obj, state) {   
    var direction = getDirection(ev, obj), class_suffix = &#39;&#39;;   
    obj.className = &#39;&#39;;   
    switch (direction) {   
    case 0:   
        class_suffix = &#39;-top&#39;;   
        break;   
    case 1:   
        class_suffix = &#39;-right&#39;;   
        break;   
    case 2:   
        class_suffix = &#39;-bottom&#39;;   
        break;   
    case 3:   
        class_suffix = &#39;-left&#39;;   
        break;   
    }   
    obj.classList.add(state + class_suffix);   
};   
_nodes.forEach(function (el) {   
    el.addEventListener(&#39;mouseover&#39;, function (ev) {   
        addClass(ev, this, &#39;in&#39;);   
    }, false);   
    el.addEventListener(&#39;mouseout&#39;, function (ev) {   
        addClass(ev, this, &#39;out&#39;);   
    }, false);   
});

위 내용은 모두의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

CSS3를 사용하여 마우스가 이미지 위로 슬라이드할 때 방향을 감지하는 멋진 3D 애니메이션을 만드는 방법

관련 기사