½ÃÀÛÆäÀÌÁö·Î Áñ°Üã±âÃß°¡
·Î±×ÀÎ
ȸ¿ø°¡ÀÔ l Ã⼮üũ l ¸¶ÀÌÆäÀÌÁö l CGIMALL
happycgi
ÀÚ·á½Ç »çÀÌÆ®µî·Ï ·©Å·100 ÇÁ·Î±×·¥¸®ºä °ü¸®ÀÚÃßõÀÚ·á Ãʺ¸°¡À̵å
Ä¿¹Â´ÏƼ
Àüü ÆîÃ帱â
Äü¸Þ´º¸µÅ© jquery , CSS , PHP , Javascript , ¹«·áÆùÆ® , ASP
»ó¼¼°Ë»ö
Ȩ > JAVASCRIPT > javascript ¼Ò½ºÃ¢°í > JQuery > jQuery Hover3d »ó¼¼Á¤º¸
»çÀÌÆ®µî·Ï
Ŭ¶ó¿ìµåű×
Javascript
php
ASP
css
html
mysql
jquery
image
API
mobile
¸Þ´º
slide
°Ô½ÃÆÇ
ÇöÀçÁ¢¼ÓÀÚ ¸í »õ·Î°íħ
jQuery Hover3d
¼Ò½ºÅë°èÁ¤º¸ ¿À·ù½Å°í ¹× ¹®ÀÇ
ÇØÇÇÆÀ
³×ƼÁð
Æ®À§ÅÍ·Î º¸³»±â ÆäÀ̽ººÏÀ¸·Î º¸³»±â
¼Ò½ººÐ·ù JQuery
´Ù¿î·Îµå Ƚ¼ö 83 ȸ
°£´Ü¼³¸í jQuery Hove3D´Â 3D Hover È¿°ú¸¦ ¸¸µé±â À§ÇÑ °£´ÜÇÑ ¸¶¿ì½º ½ºÅ©¸³Æ®ÀÔ´Ï´Ù.
Æò°¡Çϱâ ÈǸ¢ÇÔ ¸Å¿ìÁÁÀ½ ÁÁÀ½ ±¦ÂúÀ½ º¸Åë º°·Î
ȨÆäÀÌÁö¹Ù·Î°¡±â ¼Ò½º´Ù¿î·Îµå µ¥¸ð ¹Ì¸®º¸±â ½ºÅ©·¦Çϱâ
JQuery ¸¦ ÀÌ¿ëÇÏ¿© À̹ÌÁö¿¡ 3D È¿°ú¸¦ ÁÙ ¼ö ÀÖ½À´Ï´Ù. 
 
¼Ò½ºÄڵ嵵 °£´ÜÇÏ¿© »ç¿ëÀÌ Æí¸® ÇÕ´Ï´Ù. 
 

HTML

<script src="jquery.min.js"></script>
<script src="jquery.hover3d.min.js"></script>

There is a minimal markup required, the element container and element that will be transformed into 3d card

<div class="project">
	<div class="project__card">
		<!-- Content element goes here -->
	</div>
</div>

CSS

There is no special CSS file to be included, you can write your own CSS and playing with transform on child elements. However there is helper class that will be added when hovering in and out.

/* This class can be replaced using options */
.hover-in{
	transition: .3s ease-out;
}
.hover-out{
	transition: .3s ease-in;
}

Options

Option Type Default Description
selector string null Selector for element that will be the 3d card
perspective integer 1000 Perspective value for 3d space
sensitivity integer 20 Mouse movement sensitivity, larger number is less sensitive
invert boolean false Default behavior is the element will follow the mouse, look like it facing the mouse
shine boolean false Add shining layer
hoverInClass string hover-in Helper class when mouse hover in the element, will be removed after 300ms
hoverOutClass string hover-out Helper class when mouse hover Out the element, will be removed after 300ms
hoverClass string hover-3d Helper class when the mouse is hovering the element



³×ƼÁð ÀÇ°ß   ÀÌ¿ëÇϽŠÀÚ·áÀÇ Èı⸦ ÀÚÀ¯·Ó°Ô ÀÛ¼ºÇϼ¼¿ä. (»ó¾÷ÀûÀÎ ±¤°í ¹× µµ¹è¼º ±Û µîÀº »çÀüÅ뺸¾øÀÌ »èÁ¦µÉ ¼ö ÀÖ½À´Ï´Ù.)
³»¿ë ¾ÆÀ̵ð ÀÇ°ß³²±â±â
µî·ÏµÈ ÀÇ°ßÀÌ ¾ø½À´Ï´Ù.
1
À̸§
³»¿ë
:³×¸Â¾Æ¿ä: :È­³ª´Â±º¿ä: :Àá¿Í: :¿ì¿ïÇØ: :À̰ǾƳÄ: :¿ÕÇÏÇÏ: ¿Õ¿ôÀ½~ ³î·¥~
Æò°¡Çϱâ ÈǸ¢ÇÔ ¸Å¿ìÁÁÀ½ ÁÁÀ½ ±¦ÂúÀ½ º¸Åë º°·Î
µµ¹è¹æÁöÅ°
 41746661 º¸ÀÌ´Â µµ¹è¹æÁöÅ°¸¦ ÀÔ·ÂÇϼ¼¿ä.