I have been looking over this example and wanting to take it up a notch, I am trying for the number "1" card to start off like this
(-webkit-transform: rotateZ( 160deg );) and rotateZ towards 0 WHILE flipping, I've been playing around with the matrix and skewing and cannot seem to get that effect.
You can give the same transform property multiple (space separated) transform-functions at the same time, something like this in your case;
#card .front {
transition: all 1s;
transform: rotateY(0deg) rotateZ(200deg);
}
#card.flipped .front {
transform: rotateY(180deg) rotateZ(0deg);
}
(The same applies to the backface)
Chrome-only demo: http://jsfiddle.net/4Z4sF/
Related
I am trying to implement flip animation. Here is the sample link: http://animista.net/play/basic/flip
and this is the class:
.flip-horizontal-bottom {
-webkit-animation: flip-horizontal-bottom 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
animation: flip-horizontal-bottom 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}
/**
* ----------------------------------------
* animation flip-horizontal-bottom
* ----------------------------------------
*/
#-webkit-keyframes flip-horizontal-bottom {
0% {
-webkit-transform: rotateX(0);
transform: rotateX(0);
}
100% {
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
}
#keyframes flip-horizontal-bottom {
0% {
-webkit-transform: rotateX(0);
transform: rotateX(0);
}
100% {
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
}
It works fine in Chrome and Firefox but does not work at all in IE11. What changes would I require to make it work in IE 11?
From their "How to" notes:
Also, some of the animations are experimental and may not work as expected in older browsers no matter how you prefix them. Use your own judgement or better yet – consult the super-useful caniuse.com to check for browser support.
Besides, they don't provide the complete code as far as I can tell. They have a perspective:500px on their animation stage wrapper (in the demo) which makes it all work, and I don't see it mentioned anywhere in the download example code.
Even after you add it, I doubt it will work in IE, as it lacks support for transform-style:preserve-3d, as pointed out in the answers here.
I am trying to animate an element's transform property, but I noticed it's not working as I expect on IE (surprisingly).
when animating from
0% { transform: translateX(-50%) translateY(150px); }
to
100% { transform: translateX(-50%); }
It seems to ignore the translateX(-50%);
This is the way I use the animation on the html element (I use forwards so the final state of the animation is the one that remains applied to the element):
animation: myanimation 1s ease-out forwards;
I've being trying to solve this for a while, even trying from translate(-50%, 150px) to translate(-50%, 0px) but still it won't work.
Here's a working fiddle to quickly see the difference. It works well on Chrome, but misbehaves on IE.
use transform: translate(X, Y) it works on IE ( use vendor prefix for IE9 -ms-transform )
#keyframes myanimation {
0% { transform: translate(50%, 150px); } /* i suppose -50% is a typo, if it's not replace it with -50% */
100% { transform: translate(-50%, 0); }
}
#anim {
display: inline-block;
animation: myanimation 1s ease-out forwards;
}
<h1 id="anim">Hello World</h1>
You want to animate X from -50% to -50%? If you want to animate the Y coordinate, then set the value on your target percent.
100% { transform: translateX(-50%) translateY(0); }
why not? This works on IE. I've tested.
This question already has answers here:
How can I apply multiple transform declarations to one element?
(5 answers)
Closed 6 years ago.
So, I have a div, like this:
<div class="rotate-90"></div>
and the css:
.rotate-90
{
transform: rotate(90deg);
}
and I want to add another class to the div, named "scale-2", like this:
<div class="rotate-90 scale-2"></div>
.scale-2
{
transform: scale(2);
}
but when I try to combine them, the second class overrides the first one, so I get only a scaled div, and not rotated.
So, how can I combine the transforms without writing the code twice or combining the classes codes?
Thanks :)
Update 2022
At the end of last year the W3C published the working draft for "CSS Transforms Module Level 2".
This spec adds new transform functions and properties for three-dimensional transforms, and convenience functions for simple transforms.
It adds "Individual Transforms":
translate
scale
rotate
As the browser-support is over 85% it should be usable, if your project does not have to support old browsers.
So you should be able to do this from now on:
.rotate-90
{
rotate: 90deg;
}
.scale-2
{
scale: 2;
}
Here is a nice introduction-video:
"A new way to do CSS transforms!" by Kevin Powell.
Original Answer:
Transform-rules get overridden, like any other rules.
You can however combine the transforms in one rule:
.rotate-90.scale-2 {
transform: rotate(90deg) scale(2);
}
If combining the two classes isn't your wish (which I totally don't understand, but respect), and if your framework only has these two effects, than you could use zoom for the scale-rule:
.scale-2 {
zoom: 2;
}
Because you are using transform property again and its overriding previous one.
You can use both in one transform like this
.rotate-90.scale-2 {
transform: rotate(90deg) scale(2);
}
Transform property should be used with prefix to let it work in all browsers like this
.rotate-90.scale-2 {
transform: rotate(90deg) scale(2);
-moz-transform: rotate(90deg) scale(2);
-ms-transform: rotate(90deg) scale(2);
-webkit-transform: rotate(90deg) scale(2);
-o-transform: rotate(90deg) scale(2);
}
I found quite a few questions here with solutions too, but none seem to work for me. After the scale up, the text is blurry and then it flickers into position. Something wrong with the rendering.
I made a fiddle with the exact structure I'm trying to use, if someone has a solution for it, I'd appreciate it.
I want to underline that I've tried the solutions I found here, but none helped, or I haven't been able implement them as intended.
FIDDLE: https://jsfiddle.net/1yu9p66L/1/
.box1:hover {
-moz-backface-visibility: hidden;
-moz-transform: translateZ(0) scale(1.0, 1.0);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1.09);
-moz-perspective: 1000;
-moz-backface-visibility: hidden;
}
PS: Currently testing on FF 45.0.1.
Add transform to the original box that scales it to < 1 and then change the transform in hover state to 1. You'll need to adjust the sizes of the box.
This to .box1, for example:
-webkit-transform: scale(.9);
-ms-transform: scale(.9);
-moz-transform: scale(.9);
transform: scale(.9);
and this to .box1:hover
-webkit-transform: scale(1);
-ms-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1);
https://jsfiddle.net/1yu9p66L/2/
Would like to know how to hide an div after a set of css3 animation. Here's my code:
#box {
position: absolute;
top: 200px;
left: 200px;
width: 200px;
height: 150px;
background-color: red;
}
#box:hover {
-webkit-animation: scaleme 1s;
}
#-webkit-keyframes scaleme {
0% {
-webkit-transform: scale(1);
opacity: 1;
}
100% {
-webkit-transform: scale(3);
opacity: 0;
display: none;
}
}
<div id='box'>
hover me
</div>
Here's the jsfiddle sample for better illustration:
http://jsfiddle.net/mochatony/Pu5Jf/18/
Any idea how to do hide the box permanently, best without javascript?
Unfortunately there is no best solution using only CSS3. Animations always return to theirs default values (see at Safari Developer Library).
But you can try to play with -webkit-animation-fill-mode property.
For example:
#box:hover{
-webkit-animation:scaleme 1s;
-webkit-animation-fill-mode: forwards;
}
It's at least not immediately return a box to display:block; state.
Using JavaScript you can do this by using webkitAnimationEnd event.
For example:
var myBox = document.getElementById('box');
myBox.addEventListener('webkitAnimationEnd',function( event ) { myBox.style.display = 'none'; }, false);
Example on jsFiddle
Change your animation definition to:
-webkit-animation:scaleme 1s forwards;
This is a value for the animation fill mode. A value of 'forwards' tells the animation to apply the property values defined in its last executing keyframe after the final iteration of the animation, until the animation style is removed.
Of course in your example the animation style will be removed when the hover is removed. At the moment I can see the need for a small piece of JavaScript to add a class which triggers the animation. Since the class would never be removed (until the page is reloaded) the div would stay hidden.
Since elements of CSS animations end in their original CSS state, make the original state hidden by scaling it to zero or removing its opacity:
div.container {
transform: scale(0);
-webkit-transform: scale(0);
}
or
div.container {
opacity: 0;
}
Once the animation is completed, the div will go back to its original CSS, which is hidden.
That can (kind of) be solved without using JavaScript. Since animations use keyframes, what you ask for is possible by setting the duration time to a way too high value, say 1000s, and letting you transition end at a low frame, for example 0.1%.
By doing this, the animation never ends and therefore stay in shape.
#box:hover {
-webkit-animation:scaleme 1000s;
}
#-webkit-keyframes scaleme {
0% { -webkit-transform: scale(1); opacity: 1; }
0.1%, 100% { -webkit-transform: scale(3); opacity: 0;display:none; }
}
1000s is not necessary in this particular example though. 10s should be enough for hover effects.
It is, however, also possible to skip the animation and use basic transitions instead.
#box2:hover {
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
-moz-transform: scale(3);
-webkit-transform: scale(3);
opacity: 0;
}
I forked your fiddle and altered it, adding the two for comparison: http://jsfiddle.net/madr/Ru8wu/3/
(I also added -moz- since there is no reason not to. -o- or -ms- might also be of interest).