If you have a CSS property with a prefix:
-webkit-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
and reach a browser that uses the prefixed version, will it ignore the un-prefixed property or apply the property twice by also processing the prefixed version as well?
-webkit-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
A Browser will parse the attributes in order. If for example webkit reads the -webkit-transform but then reads transform wich it also knows, it will overwrite the rule of -webkit-transform. This technique is called CSS-Fallbacks and is a effect of cascading stylesheets. It will only apply it once, after reading the entire rules.
So in your case it will rotate 10deg once, and not 10deg and again 10deg
Another Example would be:
.test {
height: 100px;
background-color: red;
background: blue;
}
<div class="test"></div>
It wont ever apply the color "red", as it is overwritten by "blue" in the same stylesheet.
There's no such thing in css as a property applied twice on the same element. Never.
The browser will read them in order and only apply the last one it understands.
Related
The two blocks behave differently when applying tailwind's "rotate(**deg)" and vanilla css "transform: rotate(**deg)". Please just hover the blue blocks to reproduce.
https://play.tailwindcss.com/Rgf2GJ6mim
Since I sometimes use css in #layer utilities to write nested styles, so could someone please help me understand this? Big Thanks!!
Despite it looks like both examples do the same thing it's not quite true. Let's find out the difference. All classes in your example are same but the last one
hover:[transform:rotate(1020deg)] generates this
.hover\:\[transform\:rotate\(1020deg\)\]:hover {
transform: rotate(1020deg);
}
while hover:rotate-[1020deg] this
.hover\:rotate-\[1020deg\]:hover {
--tw-rotate: 1020deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
Or if you fill in Tailwind variables with its values it all comes to comparison between
.hover\:\[transform\:rotate\(1020deg\)\]:hover {
transform: rotate(1020deg);
}
// and
.hover\:rotate-\[1020deg\]:hover {
transform: translate(0, 0) rotate(1020deg) skewX(0) skewY(0) scaleX(1) scaleY(1);
}
We're forgot about one VERY important class - rotate-0. It actually sets the starting point of CSS transition
.rotate-0 {
--tw-rotate: 0deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
Just remove rotate-0 from both of your examples and now there is no difference in transition. So what is happening?
It all comes in CSS transition from state 1 to state 2. (Let's remove last
parts with skew and scale)
First example - from translate(0, 0) rotate(0deg) to rotate(1020deg)
Second - from translate(0, 0) rotate(0deg) to
translate(0, 0) rotate(1020deg)
MDN says
The transform functions are multiplied in order from left to right, meaning that composite transforms are effectively applied in order from right to left.
See example: red square just rotating. Yellow - rotates but returns back to default position even on hover we do NOT changing translate property. We're assuming it will left the same but this is not how CSS transition works. When there are multiple transform occurrence the last one will override previous. That's why translate is not applied anymore on hover - we're "erasing" it. In order to fix it we need to keep translate on hover (blue example)
.example {
width: 60px;
height: 60px;
margin: 40px;
transition: 1000ms;
}
.example-1 {
background-color: red;
transform: rotate(0);
}
.example-2 {
background-color: yellowgreen;
transform: translate(100px) rotate(0deg);
}
.example-3 {
background-color: blue;
transform: translate(100px) rotate(0);
}
.example-1:hover {
transform: rotate(45deg);
}
.example-2:hover {
transform: rotate(45deg);
}
.example-3:hover {
background-color: blue;
transform: translate(100px) rotate(45deg);
}
<div class="example example-1"></div>
<div class="example example-2"></div>
<div class="example example-3"></div>
And that's exactly what happening in your example - you are missing translate function in compiled CSS and changing the default state of transformed object (it is not transitioning anymore - it just places the new state). We need to keep the order of the chaining functions in transform property to ensure everything will work as expected
So, few ways to fix it in Tailwind keeping initial state (rotate-0 class), both requires to change hover:[transform:rotate(1020deg)] class
First - add missing translate function - change class into hover:[transform:translate(0,0)_rotate(1020deg)]
Second - not so obvious - change --tw-rotate variable value, basically convert class into hover:[--tw-rotate:1020deg]
And finally as I said - just remove initial state (rotate-0) but sometimes it is not an option
See examples
It's not the best explanation but I tried to point you in some direction where the difference comes from
.slideOutUp.ng-leave.ng-leave-active,
.slideOutUp.ng-hide-add.ng-hide-add-active {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
This is the css property I want to place inside an id called #headpanel.
I have tried many permutations and combinations but the effects just won't take place. Help?
My Chrome console returns Invalid CSS property name to a transform-origin CCS attribute as the site loads even though it works and I have a -webkit- prefixed version.
The target CSS looks like this:
-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
transform-origin: 0% 50%;
Is it really an issue?
I've found the origin of my issue.
The problem is that -webkit- browsers don't accept the transform-origin attribute when it is isolated from a supporting attribute (an attribute that actually uses the transform-origin).
So, for example, if I use something like this, -webkit- assumes it is wrong:
#divOne{
transform-origin:50% 50%;
animation:jump 1s ease both;
}
#keyframe jump{
from { transform: translateX(-20%) rotateY(-90deg); }
to{ transform: translateX(0%) rotateY(0deg); }
}
It is wrong because the origin attribute is detached from the transform that is going to take use of it. Even though it works, it is not entirely correct on the browser's perspective.
It should be something like this to be correct:
#divOne{
animation:jump 1s ease both;
}
#keyframe jump{
from { transform: translateX(-20%) rotateY(-90deg); transform-origin:50% 50%; }
to{ transform: translateX(0%) rotateY(0deg); transform-origin:50% 50%; }
}
Where both transforms are together on the same element.
The answer to your question in simple terms is 'NO'. It is a perfectly valid property. There must be something else that's causing the error.
Read this:
https://docs.google.com/document/d/1UsKm0ywILw9cuTRYlkhqMYTdzNcih6sO15u1eCzGgP8/edit?pli=1#
and this
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin#Browser_compatibility
I've created a left and right navigation button using only a single SVG background image and flipping it horizontally to get the other direction. This works fine in all browsers which support CSS 2D transforms except Internet Explorer 9. Basically the CSS looks like this:
div.nav-left, div.nav-right {
background-image: url('TriangleArrow-Right.svg');
}
div.nav-left {
-webkit-transform: scaleX(-1);
-ms-transform: scaleX(-1);
transform: scaleX(-1);
}
I've created a jsFiddle which correctly looks like this in Internet Explorer 10, Firefox, Chrome, Safari etc.:
But actually looks like this in IE9:
I've included a greater-than sign to illustrate in which direction the buttons should point. And actually you can see, that IE9 applies the transform correctly to the text, but does the total opposite for the SVG background image.
If I change the SVG background image to a PNG, everything works correctly in IE9 however, see this jsFiddle.
I was unable to find any information on this. It seems to be a bug, as IE9 should support CSS transforms and SVGs as CSS background correctly.
I think you need to use the special syntax for IE:
div.nav-left {
-webkit-transform: scaleX(-1);
/*-ms-transform: scaleX(-1);*/
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
transform: scaleX(-1);
left: -50px;
}
http://jsfiddle.net/g2y86/1/
It doesn't look very sharp though, maybe there's a better way.
Edit
For flipping, try with this (note that both -ms-filter and filter lines are for IE) :
div.nav-left {
-webkit-transform: scaleX(-1);
-ms-filter: fliph;
filter: fliph;
transform: scaleX(-1);
left: -50px;
}
http://jsfiddle.net/2cPYR/
From what I tried the scaleX-property indeed won't work with negative numbers on an svg background image. If you apply differnt colored borders to the div your are trying to transform you can see, that it actually gets transformed correctly, but the background image is not adapting to its container.
If you just want to solve your immediate problem, you can use -ms-transform: rotate(180deg);, the svg seems to know what it is supposed to do here.
I used filter: FlipV; to accommodate ie9
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
filter: FlipV; // flip for ie9
I want to rotate an image when i hover on it.I use the follwing code to rotate.Bui it doesn't works....
#header #scn:hover{transform:rotate(45deg)};
It doesn't works for me.I am using Firefox 4.
Is there any way to perform transform and shadow effects in IE8.
You need to add a prefix for every rendering engine. For Firefox the prefix is -moz-.
To rotate an image in all supported browsers use:
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
For text shadows in IE8 you can use Shadow Filter (MSDN).
Plus there is CSS transforms workaround for Internet Explorer:
cssSandpaper.