CSS Transforms and Hover Property - html

SOLVED - the problem is that doing a rotation puts half of the element behind the neutral (zero) Z-axis for the webpage, and WebKit apparently doesn't allow mouse events through that "neutral" plane. So changing the rotation point to the right/left edges of the panels solved it. Weird but for now it works.
I have a simple HTML5/CSS3 page with four panels. These panels use -webkit-transform to form them into a nice arrangement. On :hover, I use -webkit-transform to bring the panel up to the foreground. The code is below.
What happens is that the :hover action is unreliable. If I swipe the mouse over the panels, it's common to stop moving the mouse with it hovering over a panel but the panel is still in its original position. Specifically, swiping from left to right, the leftmost two panels appear to work fine, but the rightmost two don't scale up until the mouse is halfway across the panel.
What would cause this?
EDIT: Quick follow-up, it appears that links placed in the transformed elements will only be clickable on the leftmost (for the two left panels) or rightmost (for the two right panels) halves of the elements. In other words, the click zone is only active for the "closer" half of the element.
First, the HTML (minimal example):
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<section id="test">
<article class="tr_left"></article>
<article class="tr_midleft"></article>
<article class="tr_midright"></article>
<article class="tr_right"></article>
</section>
</body>
</html>
And the CSS:
#test article {
display: inline-block;
height: 150px;
width: 160px;
background-color: blue;
-webkit-transition: -webkit-transform 0.2s ease;
}
#test article.tr_left {
-webkit-transform: perspective(400px) rotateY(20deg) scale(1);
}
#test article.tr_midleft {
-webkit-transform: perspective(400px) rotateY(8deg) scale(0.9);
}
#test article.tr_midright {
-webkit-transform: perspective(400px) rotateY(-8deg) scale(0.9);
}
#test article.tr_right {
-webkit-transform: perspective(400px) rotateY(-20deg) scale(1);
}
#test article:hover, #test article:active {
-webkit-transform: perspective(400px) scale(1.2);
}

Its seems to be a chrome bug, since if your remove the original perspective and only have it on the hover, it works perfect.
(ex http://jsfiddle.net/mMYrf/1/)
What you could do then to make it work, could be createing an outer container which fills the perspective area and on the hover, give the inner element the hover effect.
(ex. http://jsfiddle.net/mMYrf/2/)
Awesome effect btw :)

I had the same issue with only the top 50% of the link being hoverable and clickable, while the entire element was still visible. I fixed this by adding translateZ(1px) to my -webkit-transform. This brings the entire element in front of the Z-axis and makes it completely hoverable and clickable. There is however a 1px zoom with the translateZ, but it's unnoticeable. Until this issue is dealt with, this will have to do!

Related

Rotating icon on hover

I am still learning web development and decided to test my skills by making the minecraft.net website again. On one of the links on the main page there is a dropdown menu with an arrow pointed down beside the link. On hover the dropdown menu comes down and the arrow points up. Does anyone know how to code this hover effect for the link and arrow. Also the arrow changes direction and the menu comes down wherever you hover over the link or the arrow beside it. Your help would be much appreciated. Thanks in advance.
img:hover {
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
}
If this arrow element (div, img etc) has a class e.g. "dropdown-arrow", you could do something like this:
.dropdown-arrow {
transform: rotate(0deg)
transition: transform 0.3s ease-in-out
}
.dropdown-arrow:hover {
transform: rotate(180deg)
}
Setting two transforms will ensure that when you are not hovering, it will return to its normal rotation. The transition will make this rotation smoother, not an instant change.
You can make an on hover event happen in CSS using the :hover psuedoselector. As for rotating your arrow, this using CSS' rotate() function will work:
#arrow:hover {
transform: rotate(180deg);
}
<div id="arrow">▼</div>

How to fix blurry Image on transform scale

When i put transform: scale(1.1); on hover on some element the image became blurry. How to fix this bug?
Example
Try this, it's work fine for me!
img {
-webkit-backface-visibility: hidden;
-ms-transform: translateZ(0); /* IE 9 */
-webkit-transform: translateZ(0); /* Chrome, Safari, Opera */
transform: translateZ(0);
}
TL;DR
transform: scale is actually scaling the original image, and because you are leaving it to the browser's render engine to figure out what should go there you got a blurry image. try
img {
transform: scale(.9)
}
img:hover {
transform: scale(1)
}
Aaron Sibler answered the question for me.
I just experienced this riddle. In your example, you’ll
need to transform img DOWN something like “transform: scale(0.7)” and
then scale UP to the images native dimensions on hover like
“transform: scale(1.0)”
The scale value is relative to the original image’s dimensions – not
their current dimensions on screen so a scale of 1 always equals the
original image’s dimensions.
I’ve used this here;
http://meetaaronsilber.com/experiments/css3imgpop/index.html
I had this problem with SVG scaling and blurry images. I scaled up a background image to 4.5 and the image rendered very blurry while scaling up.
I read that you can scale down first transform: scale(0.7) and then scale up to transform: scale(1.0). In my case this meant a huge rebuild of my animation. I had a very complex animation with multiple scales and transforms etc.
I just left all as is and added a pseudo scale width. The browser then seems to re-render every frame, but since the width does not actually change you still can use
transform: scale(x.x) for scaling and you get a very sharp image.
Maybe someone can confirm this. Here is my code. In my case the image was 86px wide and it zoomed up to 4.5 times the initial value.
<div class="overall-scale">
<div class="image-scale"></div>
</div>
#keyframes overall-scale {
0% {
transform: scale(1);
}
100% {
transform: scale(4.5);
}
}
#keyframes image-scale {
0% {
width: 86px;
}
100% {
width: 86px;
}
}
Hope this helps and my explanation makes sense.
Please comment if this does not work for you.
I' ve read all the comments, and tryied all solutions people suggested. But nothing was really good except rotate(360deg). Everything, except this one made stuttering on images, or they became too blurry initially. But rotating is looking strange if you don't hide it. So I decided to rotate for 0.0000001deg and it worked! Image is blurry only during the transition, but at the end and at the start of it it is sharp. May be I just had too small pictures.
So, my current solution is adding this part to CSS (and nothing else):
img {
transform: rotate(0.00000000001deg);
}

How do a make an image tilt forward on hover

I have been playing with transitions all morning and am at a road block. I have the need to have an image "tilt" forward when hovered over. Basically we have beer taps that when they hover over they want them to tilt as if they are being pulled down. I have played with a bunch of code but right now have nothing remotely close to post here. If anyone could give some help on how to accomplish this in css3 it would be greatly appreciated.
Below is a basic version (works in safari & chrome). You can play with the perspective values to change the effect.
I'm not sure where you were running into trouble, but the key points here are:
container to hold the rotated elements that will allow you to use perspective
perspective to change the overall look of the animation
transform-origin to set the rotation point of the image (using the bottom in the demo)
rotateX to rotate around the x axis - tilting the image toward/away from the viewer
html:
<div class="container">
<img src="http://placekitten.com/200/300" width="200" height="300"></img>
</div>
CSS:
.container {
-webkit-perspective: 1000px;
perspective: 1000px;
margin: 2em;
transform-style: preserve-3d;
}
img {
transition: all .5s ease;
-webkit-transform: rotateX(0deg);
-webkit-transform-origin-y: 300px; /* rotates from the bottom of the image */
}
img:hover {
-webkit-transform: rotateX(-40deg);
}
Demo jsFiddle
CSS Supports X and Y 3D rotations, but you cannot rotate on the Z axis (forwards and backwards) purely in CSS, maybe Javascript or jQuery would be able to do so.
For more on CSS rotation try reading up on it here: http://www.w3schools.com/css/css3_3dtransforms.asp
I would play around with something like CAMANJS or just create a second background image that tilts your existing image and use that on the hover event.

Clickable link area unexpectedly smaller after CSS transform

I have an unordered list with a few list items that act as flip cards using CSS 3D transforms. I want them to flip via clicks on links/anchor elements inside of the list items, and these links fill up the entire list item as well.
The list items look and act fine in their default non-flipped state, but once I click one and it flips, the clickable link area on the back side of it is only on the top half of the list item. When I inspect in Chrome, the link area is still filling up the entire height of the list item, so I'm not sure what is going on.
Fiddle: http://jsfiddle.net/chucknelson/B8aaR/
Below is a summary of the transform properties I'm using on various elements (see fiddle for detail):
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 100% 1.5em;
-webkit-transform: rotateX(180deg);
Note that I'm testing in Chrome 28 on Windows, and I'm just using -webkit prefix items in the fiddle. I also apologize for any messy CSS or markup, this problem had me iterating a bit. Any help in understanding what is happening is greatly appreciated!
Update 8/11/2013:
I was having this same problem with a 2D transforms on list items (just flipping the item, no front/back). Adding #thirtydot's translateZ(1px) transform in the CSS for the <a> tag fixed that one too. So it looks like the issue is related to the z-axis...but only on part of the link. Maybe this is a bug in browsers?
This problem may be the result of a webkit rendering bug, but the solution was to tranlsate the link's Z-axis by 1px - this seemed to push the link layer up and have it fully clickable.
To fix the 3D transform (via the fiddle from #thirtydot http://jsfiddle.net/thirtydot/YCGjZ/7/), some javascript was required:
setTimeout(function() {
flipTarget.find('div.back a').css('-webkit-transform', 'translateZ(1px)');
flipTarget.find('div.back a').css('transform', 'translateZ(1px)');
}, 600);
When using a 2D transform, adding translateZ in the CSS class worked:
.flipped {
border-top: 1px solid black;
background-color: #555;
-webkit-transform: rotateX(180deg);
}
.flipped a {
color: #eee;
text-decoration: line-through;
-webkit-transform: scaleY(-1) translateZ(1px); /* the fix */
}

Positions fixed doesn't work when using -webkit-transform

I am using -webkit-transform (and -moz-transform / -o-transform) to rotate a div. Also have position fixed added so the div scrols down with the user.
In Firefox it works fine, but in webkit based browsers it's broken. After using the -webkit-transform, the position fixed doesn't work anymore! How is that possible?
The CSS Transforms spec explains this behavior. Elements with transforms act as a containing block for fixed position descendants, so position:fixed under something with a transform no longer has fixed behavior.
They do work when applied to the same element; the element will be positioned as fixed, and then transformed.
After some research, there has been a bug report on the Chromium website about this issue, so far Webkit browsers can't render these two effects together at the same time.
I would suggest adding some Webkit only CSS into your stylesheet and making the transformed div an image and using it as the background.
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* Webkit-specific CSS here (Chrome and Safari) */
#transformed_div {
/* styles here, background image etc */
}
}
So for now you'll have to do it the old fashioned way, until Webkit browsers catch up to FF.
EDIT: As of 10/24/2012 the bug has not been resolved.
This appears to not be a bug, but an aspect of the specification due to the two effects requiring separate coordinate systems and stacking orders. As explained in this answer.
Something (a bit hacky) that worked for me is to position:sticky instead:
.fixed {
position: sticky;
}
For anyone who finds their background images are disappearing in Chrome because of the same issue with background-attachment: fixed; - this was my solution:
// run js if Chrome is being used
if(navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
// set background-attachment back to the default of 'scroll'
$('.imagebg').css('background-attachment', 'scroll');
// move the background-position according to the div's y position
$(window).scroll(function(){
scrollTop = $(window).scrollTop();
photoTop = $('.imagebg').offset().top;
distance = (photoTop - scrollTop);
$('.imagebg').css('background-position', 'center ' + (distance*-1) + 'px');
});
}
August 2016 and fixed position & animation / transform is still a problem. The only solution that worked for me – was to create an animation for the child element that takes longer time.
Actually I found another way to fix this "bug":
I have container element which hold page with css3 animations. When the page completed the animation, the css3 property has value: transform: translate(0,0);. So, I just removed this line, and everything worked as it should - position: fixed is displayed properly. When css class is applied to translate the page, translate property is added and css3 animation worked as well.
Example:
.page {
top: 50px;
position: absolute;
transition: ease 0.6s all;
/* -webkit-transform: translate(0, 0); */
/* transform: translate(0,0); */
}
.page.hide {
-webkit-transform: translate(100%, 0);
transform: translate(-100%, 0);
}
Demo:
http://jsfiddle.net/ZWcD9/
I had this issue whilst trying to implement react-color with react-swipeable-views (rsw). The problem for me was that rsw applies translate(-100%, 0) to a tab panel which breaks the default fixed position div added over the full screen which when clicked closes the color picker model.
For me the solution was to apply the opposite transform to the fixed element (in this case translate(100%, 0) which fixed my issue. I'm not sure if this is useful in other cases but thought I would share anyway.
Here is an example showing what I've described above:
https://codepen.io/relativemc/pen/VwweEez
on my phonegap project the webkit transform -webkit-transform: translateZ(0); worked like a charm.
It was already working in chrome and safari just not the mobile browser.
also there can be one more issue is WRAPPER DIVs are not completed in some cases. we apply clear class in case of floating DIVs.
<div class="Clear"></div> .Clear, .Clearfix{clear:both;}
Probably due to a bug in Chrome as I can't replicate in Safari nor Firefox, but this works in Chrome 40.0.2214.111 http://jsbin.com/hacame/1/edit?html,css,output
It's a very particular structure so it's by no means a universally applicable one-lined css fix, but perhaps someone can tinker with it to get it working in Safari and Firefox.
I just added transform: unset; to my fixed header and that worked for me!
I am also using framer motion with Next.js and having the same problem with my fixed header and this seems to fix it easily.
.header {
position: fixed;
transform: unset;
}
Setting fixed element to transform:unset; is working for me.
Adding the -webkit-transform to the fixed element solved the issue for me.
.fixed_element {
-webkit-transform: translateZ(0);
position: fixed;
....
}
Here is what works for me on all tested browsers and mobile devices (Chrome, IE, Firefox, Safari, iPad, iphone 5 and 6, Android).
img.ui-li-thumb {
position: absolute;
left: 1px;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
the fixed position of an element is broken if you apply transform to any ancestor.
<div style='position:fixed;-.*-transform:scale(2)'>...</div> //ok
<div style='-.*-transform:scale(2)'>
<div style='position:fixed'>...</div> // broken
</div>
If you can use javascript as an option this can be a workaround for positioning a position fixed element relavtive to the window when it's inside a transformed element:
let fixedEl // some node that you is position
// fixed inside of an element that has a transform
const rect = fixedEl.getBoundingClientRect()
const distanceFromWindowTop = rect.top
const distanceFromWindwoLeft = rect.left
let top = fixedEl.offsetTop
let left = fixedEl.offsetLeft
if(distanceFromWindowTop !== relativeTop) {
top = -distanceFromWindowTop
fixedEl.style.top = `${top}px`
}
if(distanceFromWindowLeft !== relativeLeft) {
left = -distanceFromWindowLeft
fixedEl.style.left = `${left}px`
}
Granted you will also have to adjust your heights and width because fixedEl will be calculating it's with based on it's container. That depends on your use case but this will allow you to predictably set the something position fixed, regardless of it's container.
Add a dynamic class while the element transforms.$('#elementId').addClass('transformed').
Then go on to declare in css,
.translatX(#x) {
-webkit-transform: translateX(#X);
transform: translateX(#x);
//All other subsidaries as -moz-transform, -o-transform and -ms-transform
}
then
#elementId {
-webkit-transform: none;
transform: none;
}
then
.transformed {
#elementId {
.translateX(#neededValue);
}
}
Now position: fixed when provided with a top and z-index property values on a child element just work fine and stay fixed until the parent element transforms. When the transformation is reverted the child element pops as fixed again. This should easen the situation if you are actually using a navigation sidebar that toggles open and closes upon a click, and you have a tab-set which should stay sticky as you scroll down the page.
in my case I found out we can't use transform: translateX() before transform:translateY().if we want to use both we should use transform:translate( , ).
If you're animating back to the original position where all translates are 0, you can use this solution where you set transform: unset;:
100% {
opacity: 1;
visibility: visible;
/* Use unset to allow fixed elements instead of translate3d(0, 0, 0) */
transform: unset;
}
If you work with React, you can wrap the element with fixed position in a Portal, and this way it will work fine
Please don't up vote, because this is not exact answer, but could help someone because it's fast way just to turn off the transformation.
If you really don't need the transformation on the parent and you want your fixed position working again:
#element_with_transform {
-webkit-transform: none;
transform: none;
}