I have one problem regarding rotating the <div> in html page. I have used -
-moz-transform: rotate(90deg)
But this property is rotating the <div> along some axis.(couldnt get that). But i want to rotate the <div> along its bottom side.(here, my div is a square-box). Is it possible?
Thanks.
sounds like transform-origin is what you're looking for.
The transform-origin CSS property lets you modify the origin for transformations of an element. For example, the transform-origin of the rotate() function is the centre of rotation. (This property is applied by first translating the element by the negated value of the property, then applying the element's transform, then translating by the property value.)
so you should end up with something like this:
transform: rotate(90deg);
transform-origin: center bottom;
/*transform-origin: 50% 100%; alternative using percentages */
you can use this properties
transform: rotate(90deg);
transform-origin: center bottom;
You can give X% and Y% as tranform-origin
For example this will gone rotate div along bottom-left corner
transform: rotate(-10deg);
transform-origin: 0% 100%;
This one gone rotate along top right corner
transform: rotate(-10deg);
transform-origin: 100% 0%;
This one gone rotate along bottom right corner
transform: rotate(-10deg);
transform-origin: 100% 100%;
and so on ...by default its 50%,50%
transform: rotate(-10deg);
transform-origin: 50% 50%;
Related
Background
I am developing a PhoneGap/Cordova app that should run on iOS and Android devices, and uses SVG images embedded as <img/> tags, using HTML attributes width="" and height="" to set their dimensions, and style="left: ...px; top: ...px; zoom: ...;" to set their relative position, with a zoom coefficient that is uniform between multiple image objects.
My problem is that when zooming in and out, the images are rendered with different sizes, both in Safari and in Chrome. This can also be seen in the desktop versions of these browsers, and I think I can narrow it down to a rounding issue with respect to the left and top CSS property. The problem is aggravated when using fractional values for the zoom CSS property, and the width and height HTML attributes.
I have created a demo here and a downloadable version here. In this demo, I have used two SVG images, identical except for their fill color, which I use for color contrast. There are three pairs in the demo: the top-most uses a fractional zoom value, the middle uses fractional width and height values, and the last uses round multiples of the width and height values. There is a button that starts an animations that simply moves all images to the right, by a single pixel in each step. It'll be easy to notice in Chrome that the middle images jiggle substantially, while a little harder to notice changes in the other two - but they are also there. I'm using Windows 10 and Chrome 65.0 -- though I can see variations of the problem in Firefox and Edge as well (though -- they are rendered differently).
Here is an animation of the demo. Note that all I am changing between frames is the left position of all images - and doing so in a uniform manner.
Actual question
For my application, the images must have consistent rendering across zoom levels and in different positions on the page. When changing the zoom, left and top properties smoothly, the images should change dimensions and position smoothly, respectfully. They should not change dimensions when changing the left and top properties. Is there a method that ensures that when multiple images use the same (possibly fractional) width and height values, but varying left and top positions, they will be rendered identically? Is there a way to ensure that smooth transition of the zoom property results in smooth rendering?
Guidelines for an answer
A proper answer would either explain why this is not possible using current browsers, pointing to a confirmed bug report that describes this problem and shows that it affects popular devices in either platform; or present an alternative way to size and position the images, while retaining the possibility to use fractional values, and that obtains uniformity and smooth zoom transitions when all images use the same dimensions.
Thanks for any help you may offer!
I think it's because the zoom property support is not quite consistent between the browsers (as you can see here https://caniuse.com/#feat=css-zoom). Try rather the transform: scale() property:
function budgeRight() {
var imgs = document.querySelectorAll('img');
imgs = Array.prototype.slice.apply(imgs);
imgs.forEach(function(img) {
var left = parseInt(img.style.left);
img.style.left = (left + 1).toString() + "px";
});
}
var interval = null;
var button = document.getElementById('button-click-me');
button.addEventListener('click', function() {
if (interval) {
clearInterval(interval);
interval = null;
}
else {
interval = setInterval(budgeRight, 500);
}
});
img { position: absolute; }
body { background-color: #000; }
<img style="-webkit-transform: scale(2.3); -moz-transform: scale(2.3); -ms-transform: scale(2.3); -o-transform: scale(2.3); transform: scale(2.3); -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; left: 41px; top: 25px;" src="https://gist.githubusercontent.com/kwikwag/74b991206c5fd197c70a6ec2c02fd238/raw/3f4070dbb97c69f716ad6b32ca5f6abd1f4fd702/rect_white.svg?sanitize=true">
<img style="-webkit-transform: scale(2.3); -moz-transform: scale(2.3); -ms-transform: scale(2.3); -o-transform: scale(2.3); transform: scale(2.3); -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; left: 40px; top: 25px;" src="https://gist.githubusercontent.com/kwikwag/74b991206c5fd197c70a6ec2c02fd238/raw/3f4070dbb97c69f716ad6b32ca5f6abd1f4fd702/rect_red.svg?sanitize=true">
<img style="-webkit-transform: scale(2.3); -moz-transform: scale(2.3); -ms-transform: scale(2.3); -o-transform: scale(2.3); transform: scale(2.3); -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; left: 31px; top: 35px;" width="9.35" height="23.35" src="https://gist.githubusercontent.com/kwikwag/74b991206c5fd197c70a6ec2c02fd238/raw/3f4070dbb97c69f716ad6b32ca5f6abd1f4fd702/rect_red.svg?sanitize=true">
<img style="-webkit-transform: scale(2.3); -moz-transform: scale(2.3); -ms-transform: scale(2.3); -o-transform: scale(2.3); transform: scale(2.3); -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; left: 32px; top: 35px;" width="9.35" height="23.35" src="https://gist.githubusercontent.com/kwikwag/74b991206c5fd197c70a6ec2c02fd238/raw/3f4070dbb97c69f716ad6b32ca5f6abd1f4fd702/rect_white.svg?sanitize=true">
<img style="left: 91px; top: 130px;" width="18" height="42" src="https://gist.githubusercontent.com/kwikwag/74b991206c5fd197c70a6ec2c02fd238/raw/3f4070dbb97c69f716ad6b32ca5f6abd1f4fd702/rect_red.svg?sanitize=true">
<img style="left: 94px; top: 130px;" width="18" height="42" src="https://gist.githubusercontent.com/kwikwag/74b991206c5fd197c70a6ec2c02fd238/raw/3f4070dbb97c69f716ad6b32ca5f6abd1f4fd702/rect_white.svg?sanitize=true">
<button id="button-click-me">Click me</button>
Notice I added transform-origin: top left, to scale each image from its top left corner.
And I also used all the vendor-prefixes -webkit-, -moz-, etc. to have a maximum compatibility on these 2 properties...
In the following code why do we use the webkit and ms keywords?
#svgelem {
position: relative;
left: 50%;
-webkit-transform: translateX(-20%);
-ms-transform: translateX(-20%);
transform: translateX(-20%);
}
EDIT: The ms- and webkit- keywords are used so each of the different CSS processors versions (microsoft (ms) and webkit) know how to handle that line. This is because of experimental features, like transform, being added by each of the CSS processors at different times.
The typical use of a block of CSS like this is used to move an element to the centre of it's parent object on the horizontal axis.
The idea is to move the element to so the left edge is in the middle of the parent:
#svgelemn {
position: relative;
left: 50%;
}
Now that the element is just to the right of the middle (remember that it's the left edge that is in the middle), you need to move the element to the left by 50% of it's own width (not it's parents width). Because we're moving the element to the left, we also need to invert the percentage so it's negative (-50%). So now you add the transform section:
#svgelemn {
position: relative;
left: 50%;
-webkit-transform: translateX(-50%); /* Webkit specific transform */
-ms-transform: translateX(-50%); /* Microsoft specific transform */
transform: translateX(-50%); /* Generic transform (all evergreen browsers) */
}
The code that you have only makes a final adjustment of only 20%, so that's not quite the middle.
You can see an example here. You can see how the top element is in the middle, while the original code makes it slightly off centre.
I'm trying to skew one single corner of my div background as shown at the green checkmark in the image below:
In CSS3 I'm however unable to achieve that, skewing completely skews every corner. I just want to skew the bottom right corner to the left (say 25px) and maintain the perspective (as shown in the image above).
background-image: url('http://rtjansen.nl/images/stackoverflow.png');
-webkit-transform: skew(-45deg);
Fiddle: http://jsfiddle.net/3eX5j/
My code is:
div {
width: 300px;
height:80px;
margin-left:40px;
background-image: url('http://rtjansen.nl/images/stackoverflow.png');
-webkit-transform: skew(-45deg);
}
All you need to do is to think in 3d:
div {
width: 300px;
height:80px;
margin-left:40px;
background-image: url('http://rtjansen.nl/images/stackoverflow.png');
-webkit-transform: perspective(100px) rotateX(-25deg);
-webkit-transform-origin: left center;
-moz-transform: perspective(100px) rotateX(-25deg);
-moz-transform-origin: left center;
}
fiddle
explanation: you are rotating the element towards you in the upper part. But, the perspective (handled though the transform origin, it's a function !) makes the left hand rotation not to translate in an horizontal movement.
See how can be controlled what is the final size
fiddle with multiple options
I have a css transform in a css3 animation that caused a div to flip over. The problem is that the content appears flipped too.
I just want the div to be flipped, but the content to remain unflipped.
Here is a JS Fiddle with my animation taking place on page load: http://jsfiddle.net/ukg4P/
See, the div and the content is flipped. How can I just flip / transform the div, but not it's contents?
Here is the animation, with the transform, that I am using:
#keyframes flip{
0%{
transform:perspective(400px) rotateY(0deg);
}
100%{
transform:perspective(400px) rotateY(-180deg);
}
}
You have to wrap the inner element in a span and apply the opposite transform :
<div class="animated flip"><span class="inner">Settings</span></div>
.inner{
display:block;
-webkit-transform: perspective(400px) rotateY(180DEG);
}
demo
http://jsfiddle.net/nicktheandroid/yWKMD/
Look at the example, when you click the element, it rotates around from the front to the back, the problem is that it's not rotating around it's center, it's like it's off balance, hold your mouse at the left border of the front side, click the element, and see how the back side's position is now off. They should be positioned in exactly the same spot.
I noticed that when I removed the padding/margin/border, it would rotate fine, but I need to have the padding and border on there. Is there a way to do this with padding and a border - so that it will rotate around the center, not off to the side?
The inner divs (#card div) are too wide (235 + 50 + 2) and/or #card too narrow (245). You must add padding and border to total width, or alternatively use box-sizing: border-box (with vendor prefixes).
You can get around this by using a negative margin on the "flipped" div.
#card .back {
background: #DDD;
margin-left: -40px;
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-ms-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
-webkit-transform-origin: center;
transform-origin: center;
}
http://jsfiddle.net/gmsitter/jm80wv7b/