I searched for this and found many solutions (using css3 transition).
Actually i am using {zoom:1.5} for all my buttons. But it is not working on firefox.
when I use transition property like:
-moz-transform: scale(1.5); /* Firefox */
-moz-transform-origin: 0 0;
All my buttons are overlapping. See ok and cancel button.
Is there any other alternative for this??
any help??
To scale 50% and keep top center:
transform: scale(0.5);
transform-origin: 50% 0;
This did work with Safari/Firefox/Chrome (I did not test with IE)
You can use:-
-moz-transform: scale(0.8);
in firefox as alternative..
It was a combination of the existing answers that did it for me:
-moz-transform: scale(...);
-moz-transform-origin: 0 0;
With 50% 0 as ricardo's answer suggesst for the latter option there was a left margin.
What others have posted isn't feasible because the image will still take the same amount of space. Granted the image size doesn't need to resize programmatically, you can scale the image using Gimp, and remove zoom.
Image | Scale Image
File | Export As...
put transform: scale(0.5); instead of zoom:0.5px, this will work.
may be you have to change margins accordingly
Related
I'm trying to translate an svg graphic in the y-axis with CSS transforms. I'm having no problem with the translate part:
transform: translate3d(0, -100px, 0);
BUT, the 100px up in the Y direction moves the svg graphic behind the parent div. I've tried putting different z-index on the various elements but can't get the svg graphic to be in front.
Here's images to show you want I mean:
And after the translate:
transform: translate3d(0, -100px, 0);
This doens't look like a z-index problem to me, but overflow. Try setting overflow: visible on .svg-container where it is currently set to hidden.
Set overflow: visible on .svg-container where it is currently set to hidden. That worked for me (inspired by Hugo Silva he deserves the correct answer). I've edited his post with the amendments
edit
Actually this is just a partial fix, this works:
transform: translateY(-100px) translateX(-3px);
but this doesn't:
transform: translateY(-100px) translateX(-3px);
I have problem with fixed background as its not rendering right in chrome 40/webkit, and after some search I found adding
-webkit-transform: translateZ(0);
fixes that, however that will break any div with
position:fixed;
Here is an example shows that the div is not fixed anymore, however the background renders just fine in the example even if translateZ(0) removed! which doesn't happen in my case.
https://jsfiddle.net/4hbj5b6e/7/
works fine on IE, Firefox...
Try using -webkit-perspective: 0; instead of -webkit-transform: translateZ(0);.
Here's your updated fiddle.
I have this weird issue with Firefox. Works okay in Chrome.
Basically, a <input> inside a div, which has this style:
.modal {
overflow:auto;
position: fixed;
top: 50%;
left:50%;
transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
}
Shows the autocomplete thingy in a totally wrong location, as you can see:
Here's a fiddle.
Any solution is welcome. (disabling autocomplete is not really what I want tho).
Why do you want to use translate to position the div, can't you adjust with top and left Unless you are using animation and keyframes translate does not provide that great benefit.
The space on the page that the element occupies remains the same as before transition,so here your autocomplete menu opens at location before the translation.
The autocomplete bug in Firefox seems to get fixed in FF33:
Comment of Catalin Varga on Bugzilla
I have a div (tab) that I rotate 270 degrees like so:
-webkit-transform-origin: 100% 0%;
-webkit-transform: rotate(270deg);
(Example here: http://users.telenet.be/prullen/align.html)
When I want to align the tab with the top edge of the content box, it's pretty easy. i just set "top" to "3px" (the border size). However, for the bottom it's another story.
It appears I need to calculate this with jquery like so:
$tab.css('bottom', (Math.abs($tab.outerWidth()-$tab.outerHeight())
(Though for this example I'm just using a static value. It may not look exactly like I want it to in your browser, here's an image: )
I was wondering if there is a better way since this does not seem to work all that well in firefox for example (1 pixel shift). Is there an easier way by adjusting the transform-origin perhaps?
(Note that I need to keep the same div structure I have now)
Ideally it'd be as easy as setting bottom to: 3px (the border thickness)
Thanks.
When you want to put the tab at the top of the sticky, apply the class .tab-top to the .sticky-tab element.
.tab-top {
transform-origin: 100% 0%;
transform: rotate(270deg);
top: 5px; /*Border Size*/
right: 5px; /*Border Size*/
}
When you want to put the tab at the bottom of the sticky, apply the class .tab-bottom to the .sticky-tab element.
.tab-bottom {
transform-origin: 100% 100%;
transform: rotate(270deg) translateX(100%);
bottom: 0;
right: -18px; /*Height (appearing as width once rotated) of the tab*/
}
Essentially you want to change the transform origin to be at the bottom right-hand corner of the element and then attach the element to the bottom of its parent. This will place the element exactly below the .sticky. Then use the translateX(100%) to force the bottom of the .sticky-tab to align with the bottom of the .sticky.
Normally, if I create:
<meter value="30" max="100">Low</meter>
I'll end up with a horizontal meter/bar if viewed on a browser that supports the html5 meter element.
Is it possible to create a vertical meter with html5?
The only solution I've been able to come up with so far is using CSS3 rotation (transform).
Yeah transform is the only way to do this..
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
Transform is the answer. The whole point of meter is that it's a semantic, not a presentational element and you should be able to style it however you want with CSS>
Using transform on the meter element has a major drawback which I have yet to find an elegant way around, it doesn't seem to change the amount of horizontal width the element requires. eg, for a meter with width 180px and height 15px transformed by 270deg, the meter will show as a vertical bar with height 180px and width 15px, but the bounding box ends up as 180x180 with a huge white space on the left side. Further CSS is then needed to reposition the element so the with gap is hidden. I've observed this behaviour on both Chrome and Firefox.