October 8, 201312 yr Hello, I would like to have a div, that when rolled over on different areas of that div, it would tilt away from the area that is rolled over. For example, if I were to roll over the top-right corner of the div, that corner would tilt away from the user (z-axis), if that makes sense? I used to see this done in Flash, unfortunately I can't remember the example. I think I have seen a CSS3 example of this, but can't remember how it was done. Does anyone know how to do this? I can provide a few Photoshop mock-ups if that helps explain things? Thanks in advance James
October 9, 201312 yr You need to use CSS transition - http://www.w3schools.com/cssref/css3_pr_transition.asp
October 9, 201312 yr you meant this ? <!DOCTYPE html> <html> <head> <style> div { width:200px; height:100px; background-color:yellow; /* Rotate div */ transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -webkit-transform:rotate(7deg); /* Safari and Chrome */ } div:hover { width:200px; height:100px; background-color:yellow; /* Rotate div */ transform:rotate(15deg); -ms-transform:rotate(15deg); /* IE 9 */ -webkit-transform:rotate(15deg); /* Safari and Chrome */ } </style> </head> <body> <div>Hello</div> </body> </html> also have a look here it doesn't seem to work on older browsers though Edited October 9, 201312 yr by sash_oo7
October 9, 201312 yr Author you meant this ? <!DOCTYPE html> <html> <head> <style> div { width:200px; height:100px; background-color:yellow; /* Rotate div */ transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -webkit-transform:rotate(7deg); /* Safari and Chrome */ } div:hover { width:200px; height:100px; background-color:yellow; /* Rotate div */ transform:rotate(15deg); -ms-transform:rotate(15deg); /* IE 9 */ -webkit-transform:rotate(15deg); /* Safari and Chrome */ } </style> </head> <body> <div>Hello</div> </body> </html> also have a look here it doesn't seem to work on older browsers though Unfortunantely that is not what I am after - as mentioned, I need the area that is rolled over to tilt away (z-axis only) from the mouse. Sort of like the iPhone game where you have to tilt the phone to get a ball in the whole (guide it around a maze etc). All I want is for the div to tilt depending on which area is rolled over. I will make a few screenshots showing what I'm after, as I don't think I'm explaining things very well..
October 9, 201312 yr If you use an image instead of a div then you can use a sprite (several images combined in one image where a different part is displayed on hover; make the img a block element).
October 9, 201312 yr something like this see here also this jquery hexa flip Edited October 9, 201312 yr by sash_oo7
October 9, 201312 yr Author something like this see here also this jquery hexa flip Almost, though what I'm looking for is to tilt a div depending on the part of that div the mouse is on. I already know how to do 3D transitions in CSS3, they are easy. What I'm looking for is for the div to tilt depending on where the mouse cursor is located on that div. I have seen this done a few times, but just trying to find an example again. Will try and do a quick video that illustrates what I'm on about. My guess is that it would involve JavaScript to calculate the mouse position and tilt the div by a certain amount in that direction. I may be able to write this from scratch, but it would probably take a while to do, so I am just trying to find an example that I can reverse engineer. Sorry if I'm not explaining myself well.
October 9, 201312 yr Author This is the sort of thing I am looking for, but with a 'hover' instead of the click/drag as in this example
Create an account or sign in to comment