JS,CSS,jQuery DIV 3D effect
Question
I'm looking for one specific effect but I'm not sure what's it called or how should I search for it.
Basically, I'm after a 3D effect. I have a DIV element, I'd like it to behave like it's placed on a ball (which is located below the center of it).
So when you mouse over the edges that edge will zoom out/in.
Has anyone seen anything like it? Is this achievable at all?
Edit: Behaviour in this example best describes what I was after but with DIVs not text. I think I'll be able to adjust this example for my needs.
Sorry if my description was too general, I wasn't sure how to describe what I needed.
1 answers
solution1
2 ACCPTED 2013-04-24 09:54:14
You can use CSS Transition for this. with css transition you can animate divs or objects.
Look at this great tutorial
https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_transitions
an example:
<body>
<p>The box below combines transitions for: width, height, background-color, transform. Hover over the box to see these properties animated.</p>
<div class="box"></div>
</body>
.box {
border-style: solid;
border-width: 1px;
display: block;
width: 100px;
height: 100px;
background-color: #0000FF;
-moz-transition:width 2s, height 2s, background-color 2s, -moz-transform 2s;
-webkit-transition:width 2s, height 2s, background-color 2s, -webkit-transform 2s;
-o-transition:width 2s, height 2s, background-color 2s, -o-transform 2s;
transition:width 2s, height 2s, background-color 2s, transform 2s;
}
.box:hover {
background-color: #FFCCCC;
width:200px;
height:200px;
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
-o-transform:rotate(180deg);
transform:rotate(180deg);
}
Hope it is what you mean.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.