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
Related
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
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.
I have a lot of progress bars which I am currently using inline style to set the width. Is there a way for me to utilise data type with LESS or just CSS?
For example:
<div class="progress" aria-valuenow="3"></div>
<div class="progress" aria-valuenow="50"></div>
Can I do something like this in LESS/CSS:
.progress[aria-valuenow=x] {
width: x%;
}
impossible to map a variable attribute value in css. can be done in less using a for loop but the output css would just be a ton of css for every possible value. my suggestion- if youre already applying the value inline using js, just apply that value to a style selector like width or translateX() and style youre progress bars accordingly
<div class="progress" width="x"></div>
.progress {
background: blue;
transition: width 300ms;
}
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.
Maybe it's a strange question since I don't wanna know 'how' but 'why', but I think the answer might be valuable for those who wish to understand the way css works better.
I'm trying to make each div on my page reveal an 'x' div which will allow the user to close that div. There are several dynamically created divs.
I have this (dynamic) html:
<div class="box">
<div class="x">X</div>
</div>
<div class="box">
<div class="x">X</div>
</div>
[the number of 'box' divs varies]
And this css:
.x {
visibility: hidden;
}
.box:hover .x {
visibility: visible;
}
I really didn't think this could work but somehow it does:
jsFiddle
But how does this simple css code 'knows' which x div should be revealed, where there are no ids to distinct the 'box' divs nor the 'x' divs?
Because it looks for the descendent .x
So when you hover over box 2 it applies the :hover and according to the css rule the .x that's inside the .box with the :hover should be visible.
Wouldn't really know how to explain it differently :P