I could use some help flipping text horizontally after rotating it 90 degrees. Here is a code pen showing what I'm doing. Basically, I'm trying to flip a couple of the seaweed pieces around so that they face different directions and look a little more natural. I've tried using transform: scaleX(-1) but that hasn't worked. I think it's because I"m already rotating the characters ("~") 90 degrees, but I'm not positive.
.seaweed {
font-size:20em;
color:green;
transform:rotate(90deg);
width:100px;
position:fixed;
bottom:-100px;
margin:0;
animation: float 3s infinite;
}
#seaweed1 {
left:5%;
}
#seaweed2 {
left:12%;
animation-delay:1s;
}
#seaweed3 {
left:50%;
}
#seaweed4 {
left:54%;
animation-delay:0.5s;
}
#seaweed5 {
left:65%;
}
#seaweed6 {
left:75%;
animation-delay:0.7s;
}
#keyframes float {
0% {
transform: translateY(-10px) translateX(0) rotate(90deg);
}
50% {
transform: translateY(40px) translateX(0) rotate(90deg);
}
100% {
transform: translateY(-10px) translateX(0) rotate(90deg);
}
}
Any ideas?
Related
I want my element, which is a text, to move in a circular path. I need to use CSS for this. I am attaching my code for the same. The error I face is I need to translate my element to the circumference of the circle. This causes the text to jump to the circumference at the start and the end of the animation. How do I solve this? Is there another method to animate objects to move in a circular direction?
.element{
position:relative;
top:50%;
left:50%;
transform:translate(-50%,-50%);
animation: orbit2 4s forwards;
}
#-webkit-keyframes orbit2 {
from { -webkit-transform: rotate(0deg) translateX(150px) rotate(0deg); }
to { -webkit-transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}
<div class= "element">
<a>NEN</a>
</div>
Something like this (or can even change the way the text wraps around the circle):
#spin {
position:absolute;
top:25%;
left:50%;
margin:50px;
animation: orbit 4s forwards infinite;
animation-timing-function: linear;
}
#-webkit-keyframes orbit {
from { -webkit-transform: rotate(0deg) translateX(150px) rotate(0deg); }
to { -webkit-transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}
<div id="spin"><p>text</p></div>
I tried to rotate an animated font arrow when the window reached a min/max size, but when the rotate takes place the animation stops, also just for testing I tried replacing transform: rotate(90deg) to transform: rotate(0deg) which maintains the same arrow's direction but it causes to stop the animation too. The issue is with transform: rotate() and it can be easily tested by inspecting the element and activating/deactivating it in the browsers developer tools.
An easy way to bypass this can be using two <p> each one with an arrow in different direction and with vertical and horizontal animation each, and using display: none; to alternate between them when the min/max size switches, but what I want is to know why this is happening and how to solve this using this approach
.text-center {
text-align: center;
}
.lnr-x3 {
font-size: 2.4rem;
}
#media (max-width: 991px) {
#catalogArrow_h {
transform: rotate(90deg) !important;
transform-origin: center !important;
}
}
.animated-h {
text-decoration: none;
outline-style: none;
-webkit-animation: movingHorizontally 1.7s ease-in-out infinite;
animation: movingHorizontally 1.7s ease-in-out infinite;
}
#keyframes movingHorizontally {
0% {
transform: translateX(0px);
-webkit-transform: translateX(0px);
}
50% {
transform: translateX(-10px);
-webkit-transform: translateX(-10px);
}
100% {
transform: translateX(0px);
-webkit-transform: translateX(0px);
}
}
#-webkit-keyframes movingHorizontally {
0% {
transform: translateX(0px);
-webkit-transform: translateX(0px);
}
50% {
transform: translateX(-10px);
-webkit-transform: translateX(-10px);
}
100% {
transform: translateX(0px);
-webkit-transform: translateX(0px);
}
}
<!-- Font Icons -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" type="text/css">
<link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
<div class="col-12">
<p class="text-center pt-3 px-5">
<span id="catalogArrow_h" class="lnr lnr-x3 lnr-arrow-right fas animated-h"></span>
</p>
</div>
Why does this happen
The transform property is "shared" for many transform functions and css doesn't combine any property's values.
Because your animation is made with transform: translateX(..), adding transform: rotate(..) will overwrite the property's value, not combine them. I.e. the resulting style is transform: rotate(..), not transform: translateX(..) rotate(..).
It would be the same if you were animating the box-shadow and then wanted an inset box-shadow too, it would overwrite one with the other. Or more simply - if you have .box { color: red; color: blue; } css will choose the last value (blue) to apply to the color property.
If there were css properties rotate: 90deg and translate: 4px (there are but not widely supported), then your animation would work, because the translate animation would be applying to a different property than the rotation, not overwriting one that is essentially shared amongst many transform functions.
Ways around it
There are many ways around this problem.
You can set the translate or rotate on the parent element
<div class="rotate-90">
<span class="translate-animate"></span>
</div>
You can add the rotate to your translate animation properties:
#keyframes movingHorizontallyRotated {
0%, 100% { transform: translateX(0px) rotate(90deg); }
50% { transform: translateX(-10px) rotate(90deg); }
}
You can animate a different property to translate the element:
#keyframes movingHorizontally {
0%, 100% { padding: 5px 10px 5px 0px; }
50% { padding: 5px 0px 5px 10px; }
}
You can use/make an already rotated arrow if your framework/ assets provides one.
This question already has answers here:
How to apply multiple transforms in CSS?
(9 answers)
Closed 2 years ago.
I'm just starting to learn some css (I was working before only in PHP + JS) and I wanted to make an animation of my image text. It should Slide bottom and Zoom in at the same time. I managed to do both but separately. I have no idea how to combine them...
Here is an example of what I have achieved:
https://jsfiddle.net/ta7208Lq/20/
// HTML
<div class="row">
<img class="zoom" src="https://cdn.shopify.com/s/files/1/0496/1029/files/Freesample.svg?5153" />
<img class="slide-bottom" src="https://cdn.shopify.com/s/files/1/0496/1029/files/Freesample.svg?5153" />
</div>
// CSS
.slide-bottom {
-webkit-animation: slide-bottom 1s;
animation: slide-bottom 1s;
}
.zoom {
-webkit-animation: zoom-in 1s;
animation: zoom-in 1s;
}
/* ----------------------------------------------
* Generated by Animista on 2020-11-7 16:22:35
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: #cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation slide-bottom
* ----------------------------------------
*/
#-webkit-keyframes slide-bottom {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(150px);
transform: translateY(150px);
}
}
#keyframes slide-bottom {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(150px);
transform: translateY(150px);
}
}
/**
* ----------------------------------------
* animation zoom-in
* ----------------------------------------
*/
#-webkit-keyframes zoom-in {
0% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
100% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
}
#keyframes zoom-in {
0% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
100% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
}
.row {
float: left;
}
img {
display: inline-block;
}
The idea is of course to put it on one image, I have just added two to illustrate the problem.
If you want to perform multiple animation at the same time, you can add additional transitions as transform: translateY(0) scale(0.2) .., And then update in keyframes as well. Here is the updated code
I am having a bit of an issue with rotation of a cube. I want to make it cross-browser so I am transforming every side of the cube. When I am rotating from left to right the sides align perfectly on all browsers Chrome, Firefox and IE, BUT when the cube is rotated from top to bottom, the sides align only on Chrome (If I make the animation slower on Chrome the sides are broken the same way as the other browsers, so I think working properly is a bug :D). I have provided an example on jsfiddle:
http://jsfiddle.net/0n9bnxe5/
HTML:
<div class="flip-card-content">
<div class="flip-card-side-a" style="background:red">
FRONT
</div>
<div class="flip-card-side-b" style="background:green">
BACK
</div>
<div class="flip-card-side-c" style="background:aqua">
LEFT
</div>
</div>
<button id="button">Flip-top</button>
<button id="button2">Filp-right</button>
CSS:
.flip-card-content {
position: relative;
margin: 100px;
width: 200px;
height: 200px;
transform-style: preserve-3d;
perspective:1000px;
}
.flip-card-side-a,
.flip-card-side-b,
.flip-card-side-c{
width: 100%;
position: absolute;
height: 100%;
backface-visibility: hidden;
transform-origin:50% 50% 0px;
transition: all .5s ease-in-out;
}
.flip-card-side-a {
transform: rotateY(0deg) translateZ(100px);
z-index: 1;
}
.flip-card-side-b {
transform: rotateX(90deg) translateZ(100px);
}
.flip-card-side-c {
transform: rotateY(-90deg) translateZ(100px);
}
.flip .flip-card-side-a {
transform: rotateX(-90deg) translateZ(100px);
}
.flip .flip-card-side-b {
display:block;
transform: rotateY(0deg) translateZ(100px);
z-index: 1;
}
.flip-right .flip-card-side-a {
transform: rotateY(90deg) translateZ(100px);
}
.flip-
right .flip-card-side-b {
display:none;
}
.flip-right .flip-card-side-c {
transform: rotateY(0deg) translateZ(100px);
z-index:1;
}
JQUERY:
$("#button").on('click', function(){
$(".flip-card-content").removeClass("flip-right");
setTimeout(function(){
$(".flip-card-content").toggleClass("flip");
},500);
});
$("#button2").on('click', function(){
$(".flip-card-content").removeClass("flip");
setTimeout(function(){
$(".flip-card-content").toggleClass("flip-right");
},500);
});
Any advice is welcomed!
Your translateZ doesn't quite work in the way you expect. Have look at how I've positioned the faces on the cube here and compare it to your own. Ultimately, I find the easiest way to rotate items such as cubes etc. is to position all the elements and then just rotate the container.
Also for nice scaling of fonts, images etc. its preferable to leave the front face at its natural size rather than scale up (i.e. move everything backward in 3d space):
.box {
height: 100%;
position: relative;
transform: rotateX(0deg);
transform-origin: 50% 50% -100px;
transform-style: preserve-3d;
transition: all 1s;
width: 100%;
}
.box--rotate-top {
transform: rotateX(-90deg);
}
.box--rotate-left {
transform: rotateY(90deg);
}
.box__face {
backface-visibility: hidden;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.box__face--front {
background: #f90;
}
.box__face--top {
background: #369;
transform: rotateX(90deg) translateZ(200px);
transform-origin: 0 100% 0;
}
.box__face--left {
background: #867;
transform: rotateY(-90deg) translateZ(200px);
transform-origin: 100% 0 0;
}
Here is the fiddle.
Transition in 3d space are tricky, and different browsers can handle them differently.
Here you have your fiddle corrected.
Your best bet is to leave nothing to the browser imagination
so, instead of changing
transform: rotateY(0deg) translateZ(100px);
to
transform: rotateX(-90deg) translateZ(100px);
make the change happen from
transform: rotateX(0deg) rotateY(0deg) translateZ(100px);
to
transform: rotateX(-90deg) rotateY(0deg) translateZ(100px);
Notice that I didn't change the transform from a mathematical point of view; but now every property matches a similar one.
Note just in case you want to know, in the first case IE is making the followng transition: change the angle of rotation from 0 to -90deg. At the same time, change the axis of rotation from Y to X. So, at the middle of the transition, the rotation is wrong (from your point of view), but in a mathematic sense, both ways of understanding the transition make sense.
When applying a CSS scale transform to an element, is it possible to set the 'from' value as the current scale?
For example, consider the following 2 CSS keyframes used to apply separate growing and shrinking animation transforms:
#-webkit-keyframes grow
{
from { -webkit-transform: scale(0,0); }
to { -webkit-transform: scale(1,1); }
}
#-webkit-keyframes shrink
{
from { -webkit-transform: scale(1,1); }
to { -webkit-transform: scale(0,0); }
}
This will successfully scale the element it's applied to, but always from 0 to 1 (or vice-versa). If the shrink keyframe gets applied before the grow keyframe has finished, it has the effect of 'jumping' the scale to 0 before the transform begins.
You can see this effect in this jsFiddle showing CSS scale transform on mouseover
Notice that if you mouse over the black square and then quickly mouse out, the scale transform is not smooth.
What I'm essentially after is something like the following:
#-webkit-keyframes grow
{
from { -webkit-transform: CURRENT_SCALE; }
to { -webkit-transform: scale(1,1); }
}
Your animation makes the element go from 0% scale to 100% scale on hover, and from 100% to 0% scale on mouseOut.
I think in this case, the solution could be setting the basic scale of the element according to its start point :
#output
{
width: 200px;
height: 200px;
border-radius: 50%;
background: #FF0000;
display: inline-block;
-ms-transform: scale(0,0);
transform: scale(0,0);
-webkit-transform: scale(0,0);
}
In this case, I would harldy recommend using pure CSS solution, using transition on :hover : http://jsfiddle.net/bg6aj/21/
You wont have any "jumping" effect :
#output
{
width: 200px;
height: 200px;
border-radius: 50%;
background: #FF0000;
display: block;
-ms-transform: scale(0,0);
transform: scale(0,0);
-webkit-transform: scale(0,0);
transition: all .2s;
-webkit-transition: all .2s;
}
#touchPad:hover + #output {
-ms-transform: scale(1,1);
transform: scale(1,1);
-webkit-transform: scale(1,1);
}
At this point, you'll have no more jumping effect.
Then : can we do something like :
#-webkit-keyframes grow
{
from { -webkit-transform: scale(0,0); }
to { -webkit-transform: scale(1,1); }
}
Answer : quite easy :
#-webkit-keyframes grow
{
0% { -webkit-transform: scale(1,1); }
50% { -webkit-transform: scale(0,0); }
100% { -webkit-transform: scale(1,1); }
}
Which means: take my element (as scale default is 100%), render it with 0% scale at 50% of the animation, and turn it back at 100%. Trying to set something like current_scale doesn't make sense.
Considering that, I'll definitely choose the Transition solution.