I want to know which are the differences between the css transforms functions rotate and rotateZ:
If I applied those properties (with same values) to two different elements I get the same results:
HTML
<div class="rotateZ">
<img src="http://ohdoylerules.com/content/images/css3.svg"/>
<h3>RotateZ</h3>
</div>
<div class="rotate">
<img src="http://ohdoylerules.com/content/images/css3.svg"/>
<h3>Rotate</h3>
</div>
CSS
.rotateZ {
transform: rotateZ(180deg);
}
.rotate {
transform: rotate(180deg);
}
They do the exact same thing. rotateZ means 'rotate about the Z axis', and the Z axis points outwards from your screen, basically giving it a third dimension.
You use the same z-axis when you define a property called the z-index, which I'm sure you know about.
Source: http://www.w3.org/TR/css3-transforms/#funcdef-rotatez
Related
I would like to apply several tranform functions to Tailwind CSS for one element order from left to right like this :
transform: rotate(45deg) translateX(50%);
But if I apply class like this, rotation is applied last.
class="transform rotate-45 translate-x-1/2"
A link to illustrate my problem :
Play.tailwindcss.com/R6PBP2OHPy
I solved this by rotating the parent div element and translating the child element. Not the most elegant solution but it works.
<div class="rotate-45">
<img class="translate-x-12"/>
</div>
https://play.tailwindcss.com/dvZnRRaKq1
I want to display an iframe at a fixed sized 1440px but scale that into a container on my page. I can get it to work with a fixed number e.g.
.scaled {
width: 1440px;
transform: scale(0.5);
transform-origin: 0,0;
}
However is it possible to scale this to fit it's parent container where the container is a percentage width e.g.
<div class="row">
<div class="column">
.... some content
</div>
<div class="column">
<iframe src="...blah" class="scaled" />
</div>
</div>
EDIT: Further description
So the ideal outcome here is to have the column being 50% of the row where the row width can vary with the viewport e.g. 900px, 1440px etc...
However, I want to have the iframe taking up the entire column width and displaying as though it were in a 1440px viewport. (Hence the width 1440px and scale transformation)
Unfortunately, this is invalid code as you cannot divide by a pixel length but something like this:
.scaled-proportion {
width: 1440px;
transform: scale(calc(100% / 1440px));
transform-origin: 0,0;
}
As you can read from MDN Web Docs and have also figured out yourself,
[In calc()'s division] The right-hand side must be a <number>.
Unfortunately, this means that this function cannot be used with two px/% values.
calc() was probably our only alternative to JavaScript, and, in absence of that, we'll have to use just that.
You can read the full guide at CSS-Tricks, or you can see a working example provided by them here.
I realize that css animations are a well covered topic, but I'm just wondering about the best way to create simple slide like transitions? Mostly, when you read about slide transitions like that, some kind of position:absolute is assumed. That is not the way content is usually organized in HTML and it shouldn't be.
So, if I want to create a transition of one div sliding to the left and one div sliding from the right, what would be a good strategy without assuming that any of those divs has absolute positioning or any other specific transition specific stuff going on to start with?
<div class="container">
<div class="this-should-slide-left">
<div>Some content</div>
<div>Some more</div>
</div>
<div class="this-should-from-left"><!--not visible initially-->
<div>Some more content</div>
</div>
</div>
I came up with this solution which seems to work, even though I'm not sure if it's elegant:
http://jsfiddle.net/CAg4f/4/
The best way to move elements around when animating is translating using css transforms.
For example, to transition when hovering over the container:
.this-should-slide-left,
.this-should-from-left {
transition: transform .25s
}
.container .this-should-from-left {
transform: translateX(100px);
}
.container:hover .this-should-from-left {
transform: translateX(0);
}
.container:hover .this-should-slide-left {
transform: translateX(-100px);
}
Translating makes the transition much smoother as it takes advantage of hardware acceleration plus there is no positioning involved, so you have complete separation between the design of the layout and the design of the animation itself.
Read more here
Aside from absolute positioning, there is relative positioning and margins.
While I would usually go with margins to manipulate a transition, relative positioning is probably the safest, as it will work for inline elements which can't necessarily be manipulated by margins.
The problem is that the 2nd article (.settings) should be rotated 360° and so its backface should be shown. (This even works if I delete the overflow in the .flip)
The only thing I can see is the frontside flipped 180 on Y axis
Possibly a bug in chrome?
PS: Yes I want the 'Really long text node display?' see as it isn't turned at all.
HTML:
<article class="flip fliped anim" style="min-height: 308px;">
<article class="settings fliped">
"Text longer than 2nd article"
</article>
<article>
...
</article>
</article>
CSS:
.flip article{
overflow: hidden;
-webkit-backface-visibility: hidden;
}
.fliped{
-webkit-transform: rotateY(180deg);
}
http://jsfiddle.net/LatpP/1/
i had a hard time fixing your code, i also found some duplicate properties, so i decided to rewrite it from scratch since i think i got what you want to achieve.
basically you dont need to go from 360 to 180 you can just go from 180 to 0 and if you need another rotation from 0 to -180 ;)
when you put the same class which has a 180deg rotation on parent and child divs like this:
<article class="flip fliped anim" style="min-height: 308px;">
<article class="settings fliped">
.fliped {
-webkit-transform: rotateY(180deg);}
what you got is the sum of degrees, that is 360 which equals to 0! also you don't always have to specificate when a div is at 0deg since this is by default.
so here is the code i wrote, the animation triggers on hover (i commented the class involved in this).
i also added another wrapper to keep the perspective more realistic, if you dont like it just delete the very first class.
if you want to see the static backface only (as you asked) you just have to add the .hover class to the .flip-container div without messing with your css, like this:
<div class="flip-container hover" >
EDIT
i forgot about the overflow issue which is easily solved by applying the overflow:hidden; property directly to the last single container of your markup. in my case directly to .front or .back divs (or both). here is the final Fiddle updated for your needs.
I'm using css3 scale transform to scale a div that contains other divs inside.
The problem I have is that some of the inner divs I need to keep as they were, basically as if they were not scaled, their size should not change, however I do need to scale the parent div with everything else inside.
How can you reverse the scaling in some of the divs?
I am trying to apply an inverse scaling.
If the overall div had applied a value of 1.5 , I'm trying to find what value I should now scale the other divs to revert them visually to how they looked before.
If the parent div has been scaled by a factor of 1.5, then you need to scale the children by a factor of 1/1.5 = 0.(6) to keep their size constant.
example
In general, in order to cancel for a child element a scale transform that has been applied on the parent and has a scale factor of a, you need to apply another scale transform of factor 1/a on the child itself.
You either need to:
compute manually the scale factor before you do anything else and then use it as it is in your code (example linked above)
use a preprocessor to handle this for you (SASS example)
use JavaScript to compute the scale factor needed for the child and
to set the scale transform on the child
You could use a CSS variable to store your scale factor, and then use calc() to calculate the inverse scale for the child elements that have a certain class:
.wrapper {
transform: scale(var(--scale));
background: #ddd;
}
.wrapper > * {
text-align: center;
}
.wrapper > .revertscale {
transform: scale(calc(1/var(--scale)));
}
<div class="wrapper" style="--scale: 0.8">
<h2>scaled title</h2>
<p>scaled description</p>
</div>
<div class="wrapper" style="--scale: 0.8">
<h2 class="revertscale">not scaled title</h2>
<p class="revertscale">not scaled description</p>
</div>
⋅
⋅
⋅
In case you don't want any of the child elements to scale, another way of doing it would be to style your wrapper as a pseudo element :
.wrapper {
position: relative;
}
.wrapper > * {
text-align: center;
}
.wrapper::before {
content: "";
z-index: -1;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
transform: scale(var(--scale));
background: #ddd;
}
<div class="wrapper" style="--scale: 1">
<h2>title</h2>
<p>description</p>
</div>
<div class="wrapper" style="--scale: 1.2">
<h2>title</h2>
<p>description</p>
</div>
<div class="wrapper" style="--scale: 0.8">
<h2>title</h2>
<p>description</p>
</div>
The inverse of any scale operation is 1 / <scale> so by scaling the container by 1.5 you would need to scale the children by 1 / 1.5 = 0.6
Unfortunately, according to the specification you cannot just use CSS like:
transform: scale(1/1.5);
since scale is defined as scale(<number>[, <number>])
where <number> is
either an or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits
So you'll have to do the calculation yourself or could use a dynamic stylesheet language like LESS which supports these sort of operations.
Demo (webkit only)
If you, as suggested, use the inverted the scale factor, then note that the child does not necessarily keep its original size during the scale transformation -- this matters of course only if you let the scale transforms have a duration (e.g. by using transition: transform;).