이 글에서는 카드의 3D 뒤집기 효과를 구현하기 위한 CSS의 샘플 코드를 주로 소개합니다.
효과:
코드:
html:
<p class="main"> <p class="box b1"></p> <p class="box b2"></p> </p>
css:
.main { position: absolute; top: 50%; left: 50%; width: 300px; height: 300px; transform: translate(-50%,-50%); -webkit-perspective: 1500; -moz-perspective: 1500; } .box { position: absolute; top: 0; left: 0; width: 300px; height: 300px; transition: all 1s; backface-visibility: hidden; border-radius: 10px; cursor: pointer; } .b1{ background:skyblue; } .b2 { background:tomato; transform: rotateY(-180deg); }
javascript:
var b1 = document.querySelector(".b1"); var b2 = document.querySelector(".b2"); b1.onclick = function() { b1.style.transform = "rotateY(180deg)"; b2.style.transform = "rotateY(0deg)"; } b2.onclick = function() { b2.style.transform = "rotateY(-180deg)"; b1.style.transform = "rotateY(0deg)"; }
-web 키트 -perspective: 원근 효과
backface-visibility: 회전된 p 요소의 뒷면 숨기기
관련 권장 사항:
Css3 기반 텍스트 3D 플립 특수 효과_html/css_WEB-ITnose
CSS3-3D Flip_html/css_WEB-ITnose
위 내용은 CSS로 카드 3D 뒤집기 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!