positioned POIs on a picture map as follows : http://sg-cms.azurewebsites.net/opespe/travel/
I have tried to apply CSS scale and re-positioning in media queries but I can't manage to have a good result. The points are never on the right place.
Do you think it is possible with this method? If not what would you suggest?
Try positioning it with percents - I think it's right direction. Berlin is near top: 21%, left: 49% and scales quite properly at my machine (firefox). Although there is a weird jump near forth zoom level (4 x CTRL + +).
Related
I want to make a speech bubble like the image below with an outline/border. The arrow is a square with two borders, rotated by 45 degress.
It does work, but the borders do not connect perfectly, as you can see when you zoom in.
Is this even cleanly solvable with CSS? If not, how would you solve it?
Source: https://levelup.gitconnected.com/how-to-create-simple-triangle-borders-with-css-665d26372825
I think you can probably just shift it outwards by one pixel to fix this, i.e. change top: -12px to top: -13px
I have this:
div {
transform:rotateX(120deg);
}
But when I make the transformation it leaves me a white space over the div. How can I make the div to stay at the top.
Pretty sure you are looking for transform-origin.
Something like transform-origin: 0% 33%; works in your case.
jsFiddle here - play around with it.
By default, the origin is set to 50% 50%.
See MDN documentation.
To change the rotation point of an element, you can use transform-origin.
Browser support is limited, and prefixed, so check in here for some more information:
(it will only work in chrome and safari for 3D transformations like this, I believe)
http://www.w3schools.com/cssref/css3_pr_transform-origin.asp
Here is an example:
http://jsfiddle.net/zAZuY/1/
notice how the second div sticks to the top. Also, take note that a 120 degree rotation will begin to flip your element upside down if the origin point is at the top (you are actually seeing the backside of the element at this point)
Something like:
div {
transform:rotateX(120deg);
transform-origin:top left;
}
Best way to grasp this is to pretend the DIV is a piece of paper and you're sticking a nail onto the top left hand side of the paper. Now since you're flipping the paper on the X axis, it uses the top of the paper as the folding point and turns itself around that area.
Remember to declare both the "webkit" and "ms" versions of "transform" and "transform-origin" in your CSS since the vanilla statements haven't been universally adopted yet.
I have built 3 little cubes in CSS and grouped them in a line within a div #first_line_of_cubes at the very bottom of CSS file. You can see it here: http://jsfiddle.net/ZVVK3/ (I think it works only in Chrome, since there aren't all the neccesary prefixes)
Now I want to rotate the line #first_line_of_cubes by using:
-webkit-transform:rotateY() rotate(x)
The problem is that ir rotates around left hand side corner of grouped cubes, but I want it to rotate around the center of grouped cubes.
So far Google said that solution is -webkit-transform-origin property, but I can't get any kind of effect with any values I have tried. What's the problem and how can I make it rotate around it's center?
If there isn't CSS solution, JavaScript/jQuery is also fine.
For me it in Chrome version 27 setting the origin seems to work fine, although it seems like the center isn't quite where I think it is:
http://jsfiddle.net/MRpUb/
-webkit-transform-origin:300px 0px 0px;
I have a requirement, that needs to rotate an image with some realistic sense - on a skewed horizontal plane with eye level, imagine a spinning flying disc or helicopter blades.
By that I mean, (not a flat rotation like a spinner) but something that gets bigger when it its facing your disappears as it spins back - on a skewed horizontal plane with eye level.
objective is to get a realistic look with an icon or an image, where it looks like its rotating in 2.5D with HTML
Can this done with HTML5 simply, with out a canvas.
Can you share an example with either canvas or straight HTML5 trickery
You can do this in CSS3 using a 3D transform:
transform: rotateX(45deg);
And on the container:
perspective: 500px;
Experiment with the exact values to get the effect you want.
I've run into an issue when using the transform property.
I have 1 simple DIV the fills the screen, and another DIV that sits on top of it.
I'm applying the following transform to the DIV on top:
'transform':'rotateX(Xdeg) rotateY(Ydeg)';
I'm also using preserve-3d
This works perfectly in all browsers except Safari. From what I've read, Safari is the only one that actually gets this correct, and clips the top DIV which the transform is being applied to. The other browsers don't clip the DIV. Basically, when the DIV is rotated, it's going inside/behind the bottom layer DIV.
So, I'm assuming that I need to use translateZ to pull the top DIV forward?
My question is, how would I go about calculating how much I need to translate the div forward along the Z axis, or getting this to work in Safari? The rotate X and Y will be variables, so users might be able to rotate the element along either the X, Y, both or none at all.
Any help on this would be amazing. Thanks!
Are your X and Y values always positive ?
In this case,
transform-origin 0% 0%
should do the trick (making the rotation center be the point that will be the lower in the result)
if not, you only need a little logic:
if your X angle is positive, x origin is 0%, else x origin is 100%
if your Y angle is positive, y origin is 0%, else y origin is 100%
and then, apply
transform-origin x-origin y-origin
I am unable to reproduce your problem without a jsFiddle. You could use a function like element.getBoundingClientRect(). This will give you the current coordinates of the second transformed div. If you compare these with the coordinates of the first div you should find the needed translateZ. You need to compare all 4 corners of the transformed div. A negative DELTA means that that corner is intersecting the first div.