I have a fiddle here you can play with. Move around the rotateX and rotateY sliders to see. The part of the element that is closest to you is smaller while the part that is farther away is bigger. If you flip it around using
transform:rotateZ(180deg);
it looks right but I don't understand why it doesnt just look right in the first place.
update
it makes sense if you look at this 3d cube. the transform origin of the cube is the middle of the cube.
Isometric
As far as I can tell the methods work as they are suppose to, it's just that they are rotated in isometric 3D, that is without perspective. This will make your closest and further edges will have the same size, unlike real 3D where the further edge will look smaller and the closer will look bigger.
For a in depth look at isometric projection give the wikipedia article a read.
Perspective
If you want to get perspective on the rotations you have to add the perspective property to your CSS for the containing element. If you add -webkit-perspective: 1000px;to <body> in your first fiddle and view the result in Chrome you'll get perspective 3D like you probably wanted.
More info on that property can be found in the CSS3 transform spec.
Related
is there any way to make the perspective of an element in HTML centered in the middle of the screen, so that the perspective point is not moved when you are scrolling...?
Thanks
EDIT:
Here is a small picture of my idea...
The element would be visible from the top and become visible from the bottom as you scroll down.
http://i.stack.imgur.com/W84Me.png
Sorry for my bad english
While traditionally, HTML Elements are 2D boxes only, since CSS3 there is the transform property which lets you transform the boxes in 3D space.
http://www.w3schools.com/cssref/css3_pr_transform.asp
This allows for such perspectives. But since only few browsers let you choose a perspective projection (only orthogonal), you may have to create the transformation matrix yourself. You may find tutorials and formulas for that in most modern OpenGL tutorials, for example.
Only problem left is show a different image from the bottom, since in HTML, an element looks the same from both sides (only mirrored). Maybe you can position 2 elements slightly above each other to get two different faces.
Also, you will need JS to move around the object on the screen.
Maybe you better use some modern technique like canvas or WebGL to do this, since HTML is not really made for 3D.
I am trying to get an effect like this:
http://www.welcomeanimations.com/welcome_animated_gifs_rotating_sign_orange_chrome_k_1.htm
I have tried all sorts of things:
Matrix translation/rotation - spins the text around the 'Z' axis, instead of 'Y'
Adding TextField to a sprite, and Sprite.rotationY++: reg. point is upper left corner
Adding to MovieClip - same as above (an article said MovieClip's reg. point was centered).
This should be trivial?!?! Help me stackoverflow, you're my only hope!
So you have to remember, Display objects scale and rotate around their local coordinate system. so when you put a textfield in a sprite, you need to center it in that sprite's coordinate system. And doing that for textfields is annoying because their width/height isn't always accurate but there is trick for that: get visual bounds, but normally you can take half of somethings width and height
I've created a prototype for you on wonderfl so you can see the solution working in action. Click on the blue square to see how the local coordinate system messes with the rotation
Finally as you use thing you might find things not rotating in 3D space quite right, this should be able to fix that.
I'm really struggling to get my head around this... I'm trying to rotate a bunch of SVGs through 90 degrees. There will be one or more of these displayed on the same web page, and I'd like them to more-or-less fill a page each when printed.
I've not generated the SVGs and they are supplied with a strange viewBox setting. The entire thing seems to be contained in a single layer, so if I apply a transform = "rotate(90 0 0)" to that layer, it does indeed rotate -- but it doesn't remain in the viewBox.
I may be getting the terminology wrong, but I've setup a Fiddle with an example of one of the SVGs here.
I'm planning to adjust the attributes using jQuery, which I know works -- I just don't know what to change!
Any help is much appreciated.
The second and third parameters of the rotate operation are the x and y of the center of rotation. Try setting them to the centre point of the viewBox.
I want to layer 4 images on top of each other inside a table cell with css. Here is what I want the final image to look like:
The 4 images are:
The gray rounded corner rectangle
with the red shaded triangle and the
numbers
The blue bar
The lines on top of the bar
The yellow triangular indicator
All these images must be on top of each other within the a table-cell. The bar must be able to stretch (I would draw it with a css div with a variant width property if it's possible) and the triangle indicator to move, so the entire thing can't be one image.
Any ideas how to do this?
Note: any solutions have to work in IE6 and up, Firefox, and Chrome
Would this be what you want to do?: How to let an HTML image overlap another
If this was my challenge, I think I'd be looking at a full-fledged charting solution to make this a quick, painless process and give a better looking (and animated?) result.
Here's a near dead ringer that I found with some quick Google-Fu: http://www.fusioncharts.com/widgets/Gallery/Linear1.html
I've had to do a lot of charting of late for applications I build and I --used-- to hand-roll all my charts and tables. Not any more! Between HighChart, FusionCharts, and JqueryUI, it's all covered, no reason to invent the wheel....and they look better.
Today i found this site, "3D Meninas", with a nice effect of 3D animation. When I look at the HTML code, it seems that there is no <script> or event, so I guess it only works with CSS. I'm not a CSS guru, can someone tell me how it works ?
Thanks
It works by dividing the picture up vertically into single pixels and having a css hover pseudo-class for each one. There are 505 mentions of the word hover. If you are looking at the source in a viewer that doesn't wrap lines, note that the lines at the bottom are extremely long (scroll to the right).
The image is divided into about a hundred vertical "slices". When hovering over each slice, each image is placed in a precise and hard-coded fashion.
The feature with most depth, the right-hand wall, is simply squished and stretched by changing its width attribute.
Edit:
Here's the official explanation by the creator.