이 기사의 예에서는 jQuery가 3D 텍스트 효과를 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다. 이 jQuery를 기반으로 한 3D 텍스트 효과 데모는 실제 3D가 아니라 여러 텍스트로 구성된 3D 효과입니다. 처음 웹 페이지를 로드할 때 오류가 발생하면 페이지를 새로 고치십시오. 사용 중에는 문제가 발생하지 않습니다. 코드 복사 코드는 다음과 같습니다. jQuery 3D文字 <br> body{<br> font-family: Arial, "MS Trebuchet", sans-serif;<br> background-color: #111;<br> }<br> #list{<br> margin:0 auto;<br> height:600px;<br> width:600px;<br> overflow:hidden;<br> position:relative;<br> background-color: #000;<br> }#list ul,#list li{<br> list-style:none;<br> margin:0;<br> padding:0;<br> }<br> #list a{<br> position:absolute;<br> text-decoration: none;<br> color:#666;<br> }<br> #list a:hover{<br> color:#ccc;<br> }<br> ajax css design firefox flash html Devirtuoso jquery PHP SEO usability www web xhtml <br> $(문서).ready(함수(){<br> var 요소 = $('#list a');;<br> var 오프셋 = 0; <br> var 스테핑 = 0.03;<br> var list = $('#list');<br> var $list = $(목록)<br> $list.mousemove(함수(e){<br> var topOfList = $list.eq(0).offset().top<br> var listHeight = $list.height()<br> 스테핑 = (e.clientY - topOfList) / listHeight * 0.2 - 0.1;<br> });<br> for (var i = element.length - 1; i >= 0; i--)<br> {<br> 요소[i].elemAngle = i * Math.PI * 2 / 요소.길이;<br> }<br> setInterval(렌더링, 20);<br> 함수 렌더링(){<br> for (var i = element.length - 1; i >= 0; i--){<br> var angle = 요소[i].elemAngle 오프셋;<br> x = 120 Math.sin(각도) * 30;<br> y = 45 Math.cos(angle) * 40;<br> size = Math.round(40 - Math.sin(angle) * 40);<br> var elementCenter = $(element[i]).width() / 2;<br> var leftValue = (($list.width()/2) * x / 100 - elementCenter) "px"<br> $(element[i]).css("fontSize", 크기 "pt");<br> $(element[i]).css("opacity",size/100);<br> $(element[i]).css("zIndex" ,size);<br> $(element[i]).css("left" ,leftValue);<br> $(element[i]).css("top", y "%");<br> }<br> 오프셋 = 스테핑;<br> }<br> });<br> <br> </본문><br> </div>