I am trying to apply a simple transform: rotateY(90deg) on an div but it's (the div) disappearing as a result, dev tools is not throwing any error on that line, any suggestions or anything I might be missing?
This happens because when you rotate something on the Y axis by 90 degrees it has spun so that it's essentially facing a different direction. In the below example I've added a transition to show how the element changes over time (hover over it):
figure {
background: red;
height: 100px;
transition: 1s;
width: 100px;
}
div:hover figure {
transform: rotateY(90deg);
}
<div>
<figure></figure>
</div>
As our viewport looks directly onto the element and features no depth, it appears that the element has disappeared altogether.
If we do add some depth, it's easier to visualise what's happening:
The cube on the left is our pre-transform cube and the cube on the right is our cube after it's had rotateY(90deg) applied to it. As we have no depth at all and we're looking at our element front on, we can't see anything when it gets rotated by 90 degrees.
Related
I've tried searching for a solution to this problem, but haven't found one yet.
What I'm trying to do is simple:
When I click one button, I'd like a box to move 200px to the right with CSS transitions. When I click a second button, I'd like the box to move 200px down from the position it is currently in.
I have this basic code here:
HTML
<button class="one">First</button>
<button class="two">Second</button>
<div class="box"></div>
CSS
.box {
width: 100px;
height: 100px;
background-color: red;
transition: transform 2s;
}
.box.transOne {
transform: translateX(200px);
}
.box.transTwo {
transform: translateY(200px);
}
JS
$(".one").click(function() {
$(".box").toggleClass("transOne");
});
$(".two").click(function() {
$(".box").toggleClass("transTwo");
})
However, when I click on button number two, the box does move 200 down, but it moves diagonally back to the first X axis position while it's going down (I.e. it doesn't stay 200px over on the X axis).
Is there a way I can possibly do this with keyframes? Like triggering a second keyframe with a second button click, etc. Or is there a better way? I'm pretty stumped and can't find any solutions, so any help is much appreciated. Thanks!
SHORT ANSWER
set the translation X in class .transTwo too
.box.transTwo {
transform: translate(200px 200px);
}
EXPLANATION
the transform is overriding the others, this is the nature behaviour of the css, just like other property color, background-color,
The basic rule is the latest property set is the strongest, the strongest is at inline style unless you implement !important
I'm experiencing a weird phenomenon using Microsoft Edge (40.15063.674.0) / Microsoft EdgeHTML (15.15063) with the code below. As expected, when you hover over the black box with any browser, it smoothly scales the box to 1.25x its size over 0.5 seconds. The problem happens when a mouse is moving too fast across the box in Edge. What happens is that instead of scaling smoothly, the box jumps/snaps to the desired transformation and then back again. Let’s say a user was moving their mouse fast from one side of the screen to the other and “cutting across the lawn” so to speak across the surface of the box.
In fact, if I move too fast in other browsers, the box doesn't attempt to scale at all. It just stays small unless the mouse movement actually ends up stopping in that area. Even in Internet Explorer this works just fine with as fast as I can move the mouse pointer across it, but only in Edge do I find this behavior. I have to go relatively slow to prevent that jitter-like snap. It doesn't matter what the effect is either. It could be a "scale", a "translateY", etc. If the mouse is moving too fast across the ":hover" it's not smooth in Edge. Is this a known issue? Is there anything I could do to prevent this from happening?
<!DOCTYPE html>
<style>
.box {
background-color: #000;
cursor: pointer;
position: absolute;
left: 200px;
top: 200px;
height: 200px;
width: 200px;
transition: transform 0.5s;
transition-delay: 0.1s; <=== Added this to stop it from jumping
}
.box:hover {
transform: scale(1.25);
}
</style>
<div class="box"></div>
I've even tried replicating the effect using jQuery's ".hover" function to add the CSS attributes when the mouse enters and then take them away when the mouse leaves but to no avail. It behaves exactly the same way. The hover effect jumps/snaps if the mouse is moving too fast in Edge.
This should be a comment, but sub-50 rep here.
You might want to try adding translateZ() or use scale3d() directly, to enable hardware acceleration, and using transition-delay to delay the transition altogether when hovering for less than 100ms.
.box:hover {
transform: scale3d(1.25, 1.25, 1.25);
transition-delay: 0.1s;
}
/* or */
.box:hover {
transform: translateZ(0) scale(1.25);
transition-delay: 0.1s;
}
I try to make a mobile menu: http://animesector.budi.upperyard.de/
You can see at the top Header Bar 2 Menu Buttons.
The right one give the Content area transform(translateX(-200px));
The left one give the Content area transform: translateX(200px);
The Negative (-) value dont create a Scrollbar horizontal Scrollbar...
But the Positive one does. have anyone any solution for this problem?
I tried to give the div around a overflow: hidden; but this didn't work for me.
You can prevent the horizontal scrollbar with overflow-x: hidden in the body element. Tried it right in the browser with dev tools and worked perfectly.
I had exactly the same issue. In the end I avoided the menu getting scrolled off the screen using translateX - I used the scale transform instead.
Your site is not visible anymore, but probably this is what you did to make the menu visible by transitioning:
translateX(-200px) -> translateX(0)
I used the scale to achieve somewhat similar transform:
scale(0,1) -> scale(1,1)
.menu {
transition: transform 150ms ease-in-out;
transform-origin: top right;
transform: scale(0,1);
}
.menu.open {
transform: scale(1,1);
}
Yes, there is a difference in the animation but it's probably not even recognised by most users if it happens fast.
No overflow manipulation needed.
I want to flip an image with a rotation animation when hovering over it (see the code below). When hovering over the image, it rotates around its x-axis for one second (and back when the mouse leaves the image).
The animation works as expected in Firefox and Safari. However, Chrome sometimes skips the animation and flips the image instantly. I don't know how to reliably reproduce the problem because it usually works a few times before the animation is skipped. I have recorded a video, so you can see what I mean: https://www.youtube.com/watch?v=bpgi46F_5RU
Is something wrong with this CSS? I first suspected that it's caused by the rotation angle but the same problem occurs even with other types of animations.
.flippable-container {
float: left;
perspective: 1000px;
}
.flippable {
transition: transform 1s;
}
.flippable-container:hover .flippable {
transform: rotateX(180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="flippable-container">
<img class="flippable" src="http://lorempixel.com/200/200/food"/>
</div>
Edit: As commented by TylerH, it looks like a bug in Chrome. I see the same problem in this well-known tutorial by David Walsh: http://davidwalsh.name/css-flip. Video: https://www.youtube.com/watch?v=o_TViH4AmZ8. The issue must be related to mouse interaction because the 'Toggle Flip' button below the image works fine.
I have fixed this by putting a z-index and position:relative on all the flippable items. I have no idea why that would affect it but it seems to have done the job.
example: http://jsfiddle.net/L0duLu3c/2/
.flippable-container {
float: left;
perspective: 1000px;
}
.flippable {
transition: 0.6s;
z-index:10;
position:relative;
transform: rotateX(0deg);
}
.flippable-container:hover .flippable {
transform: rotateX(180deg);
z-index:20;
}
I am trying to get my div to rotate 360deg every time I click it, using CSS3 transform rotate. However, I'm also using the CSS3 transform translate to vertically align my div.
On the first click, it applies all the required CSS but doesn't actually rotate, however will rotate all clicks after that. It stays vertically aligned the whole time.
Unsure how to solve this and any help is appreciated :)
My css:
#my-div {
height: 300px;
width: 300px;
transition: all 0.5s ease-in-out;
display: block;
margin: auto;
/*to vertically align*/
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
My javascript
var angle = 360
$('#my-div').click(function() {
$(this).css({
'-webkit-transform' : 'translateY(-50%) rotate('+angle+'deg) ',
'transform' : 'translateY(-50%) rotate('+angle+'deg)'
})
angle += 360
});
In fact the transition works properly only when the 2 ends are explicitly set, here intially the rotate transform is not set explicitly, after the first click, it's explicitly set to rotate(360deg) and hence the next clicks work. To solve this, you just need to apply rotate(0deg) for your div initially via the CSS code:
#my-div {
/*...*/
-webkit-transform: translateY(-50%) rotate(0deg);
transform: translateY(-50%) rotate(0deg);
}
Note that I emphasized on the properly word, in fact if you set the initial angle to some angle equal or smaller than 180deg, you'll see it transitions OK. I doubt that if you don't set the initial rotate transform explicitly, the behavior is determined by the browser, that is 360deg won't make any transition, otherwise the rotating transition may be clockwise (if the angle % 360 is less than or equal to 180deg) and counter-clockwise if the angle % 360 is greater than 180deg (note about the modulo operation between angle and 360).
Demo.