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;
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'm using the following radial menu...
http://www.cssscript.com/demo/radial-popup-menu-with-javascript-and-css3-circlemenu/#
Looks great, however I want two on my page. One bottom right and one bottom left.
That's no biggy, however obviously when on the left of the screen i need the buttons to pop out to the right and visa versa.
my question...
for each of the list items there's a transform in the CSS like...
transform: translate(-144px, 0);
obviously having it as a positive 144 will make it move to the right, which is great when the menu is positioned in the bottom left...
Rather than having to have a left class and right class with essentially the same CSS behind it, just one being positive and the other negative, is there a nice way to have 1 set of css rules that will just translate the li away from the div/screen edge?? or maybe I am thinking about this completely wrong (feel free to say if i am being a numpty)?
thanks
marking as resolved, as per #hissvards comment
"I don't think there's a way to do it using pure CSS, but it would be
dead easy with a preprocessor. - Hissvard"
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.
Ideally I'd like to do this using CSS3, but would settle for SVG. I can make something quasy like this in CSS JSFiddle ...but border-radius didn't seem up to flaring out the curved lines like the image shows.
Basically I have a header div and am hoping to create this darker curved region at the top of it.
I'd greatly appreciate any help from any clever CSS gurus. Thanks!
I got it pretty close using the jsFiddle you started and changing up the border radius a bit.
http://jsfiddle.net/CoryMathews/Q9Mrt/
using border radius you can define different lengths for the x and y axis. So I used
border-bottom-right-radius:40px 20px;
border-bottom-left-radius:40px 20px;
That gives it a length of 40 on the x axis and 20 on the y. Its not quite as sharp as your picture above but its pretty close. more info
I'm getting a tiny rounded corner halo effect that I'd like to get rid of. In this example, look for the effect in the red circle. Here's a zoom in of the effect:
I seem to recall a while back reading an article on just this problem. Anyone have a link to that article? Otherwise, any good ways to get rid of the halo?
It is being caused because the dl has all four corners rounded. This allows the bottom of the dl to be rounded. The dt sits over the dl and has its top left and top right corners rounded. But there is a slight overflow of the dl curve behind the dt curve, causing the halo.
My solution is to increase the border-radius of the dl so that it is hidden behind the dt corner. But it seems like a hack and adds a fair amount more CSS. I'm wondering if there is a better solution. Here it is without the halo:
If you don't mind a 2 pixel discrepancy you could add...
div.content dt.top {
position: relative;
top: -2px;
}
But I think your solution is good, it can be improved by using the shorthand version of border radius:
http://jsfiddle.net/DAjWS/
border-radius: [topleft] [topright] [bottomright] [bottomleft]
The article you are mentioning probably has to do with the combination of border with border-radius (it produces a halo similar to yours), but in your case it's expected. The same thing would happen in a vector editing app if you overlapped two boxes with rounded corners. you just have to find an elegant way of covering the anti-aliasing of the bottom box.
I just came across the article that I mentioned in my question. It was linked to from html5boilerplate.com. Essentially, the following webkit CSS will get rid of the bleed (or halo as I called it):
-webkit-background-clip: padding-box;