jQuery를 사용하여 텍스트 뒤집기 효과를 얻는 방법

  <div class="flipper">
     <span class="front">正面</span>
     <span class="back">反面</span>
  </div></p>
<p></div><br></body><br></html></p>
<p>2단계. CSS 스타일 만들기</p>
<p>DIV 컨테이너와 SPAN 태그의 스타일을 정의하려면 CSS 스타일도 필요합니다. 필수 CSS 코드는 다음과 같습니다. </p>
<p>.flip-container {</p>
<pre class="brush:php;toolbar:false">perspective: 1000px;
position: relative;
width: 200px;
height: 150px;
margin: 0 auto;

}

.flipper {

position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 0.5s ease-in-out;

}

.front, .back {

position: absolute;
width: 100%;
height:100%;

}

.front {

font-size:48px;
text-align: center;
background-color: #fff;

}

.back {

font-size: 48px;
text-align: center;
background-color: #000;
color: #fff;
transform: rotateY(180deg);

}

CSS에서는 플립 컨테이너(flip-container)와 플리퍼(flipper)라는 두 가지 클래스를 정의합니다. 플립 컨테이너의 스타일은 컨테이너의 너비와 높이뿐만 아니라 3D 회전 효과를 추가하는 데 필요한 원근 속성도 정의합니다. 플리퍼의 스타일은 3D 회전 효과에 필요한 컨테이너의 위치, 너비, 높이 및 변환 스타일 속성을 정의합니다.

또한 앞과 뒤의 두 가지 SPAN 클래스도 정의합니다. front 클래스의 스타일은 앞면 텍스트의 배열과 배경색을 정의하고, back 클래스의 스타일은 뒷면 텍스트의 배열, 배경색, 글꼴 색상, 회전 효과를 정의합니다.

3단계. jQuery 코드 작성

이제 jQuery 라이브러리를 사용하여 텍스트 뒤집기 효과를 얻기 위한 코드를 작성하겠습니다. 마우스를 요소 위로 가져갈 때 실행되는 jQuery의 .hover() 메서드를 사용하겠습니다. 이 예에서는 마우스를 플리퍼 요소 위로 가져갈 때 플립이라는 클래스를 해당 요소에 추가합니다.

다음은 jQuery 코드입니다:

$(".flipper").hover(function(){
$(this).addClass("flip");
});

위 코드는 마우스 호버링 플리퍼 요소에서 정지할 때, 즉 호버링 기능을 실행하면 플리퍼 요소에 플립 클래스가 추가됩니다. 그러면 DIV 컨테이너가 180도 회전하고 반대쪽에 텍스트 내용이 표시됩니다.

4단계. 코드 테스트

이제 웹 페이지를 실행하고 효과를 테스트할 수 있습니다. DIV 컨테이너 위로 마우스를 가져가면 컨테이너가 뒤로 뒤집어 반대쪽에 텍스트 내용이 표시됩니다.

jQuery 라이브러리를 통해 얻은 글꼴 뒤집기 효과입니다. 더 나은 결과를 얻기 위해 필요에 따라 HTML, CSS 및 jQuery 코드를 수정할 수 있습니다.

요약

이 문서에서는 jQuery를 사용하여 글꼴 반전 효과를 얻는 방법을 보여줍니다. HTML 구조, CSS 스타일, jQuery 코드를 생성함으로써 웹 페이지에 멋진 효과를 쉽게 추가할 수 있습니다. 이 기사가 도움이 되기를 바랍니다!

위 내용은 jQuery를 사용하여 텍스트 뒤집기 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!