3D Animation with png image
Question
I try to animate a little image with HTML5/JS/CSS. It should rotate in z-Axis. I know how to do it with x-/y-Axis, but z-Axis seems to be different.
I couldn't find a nice tutorial oder documentation on how to do that.
Would be great, if someone could give me some hints!
Thanks so far!
2 answers
solution1
1 2012-07-20 08:31:21
I think what you're interested in doing is best done with 3d rendering capabilities. WebGL can help you.
There are plenty of tutorials out there to help you get started with webGL. It's quite simple and these are the general steps you need to take.
- Init your canvas with webGL
- Create a new gl texture
- Load an image and bind to the texture
- Create a basic quad and texture it when you render with your fancy new texture
- Rotate you quad in 3d space
- Render!
There is way too much code here to describe in details how to do this. Look at the tutorials and come back if you have more questions.
Good luck!
solution2
0 2012-12-10 03:40:00
HTML:
<html>
<body>
<div id="rotated">
HelloWorld
</div>
</body>
</html>
CSS:
#rotated {
height:200px;
width:100px;
background-color:red;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateZ(45deg);
-moz-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
In order to rotate an object in 3 dimensional space, you would use the HTML5 CSS3d transforms. Make sure you add the styles shown above that "preserve-3d" rendering, otherwise your object will show a 2 dimensional representation of a 3d object.
If you want to change that style in javascript, it would be:
document.getElementById('rotated').style['webkitTransform'] = 'rotateZ(45deg)';
document.getElementById('rotated').style['mozTransform'] = 'rotateZ(45deg)';
document.getElementById('rotated').style['transform'] = 'rotateZ(45deg)';
There are plenty of CSS3d tutorials out there already. Make sure you are using the latest version of a CSS3d-enabled browser like firefox or chrome.
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.