On Chrome on OSX, rotating a element in 3D and performing the inverse of the rotation on a child element breaks mouse events on the child including any links. The hit area seems to be misaligned.
The dom structure is:
<div class='test'>
<div><a href='http://www.google.com'>Click me</a></div>
</div>
The above dom structure is also on JSFiddle
Does anyone know a workaround using the same dom structure that preserves the correct click area?
if a DOM element has an event connected to it for example a click element and you rotate it 90 degrees the element is still at that location but you can't click on it due to it being flat. DOM elements have a zero depth so when you rotate a DOM element 90 degrees you can't see it. if you rotate that same element back you will see it and the click event works. technically the click area works when the element is rotated 90 degrees it just has a zero point area to be clicked.
For the people that do not believe that the event is still attached test this out and see for your self. The event will stay connected to the element no matter how many transformation you do. It also works for chrome. This also works for links too. The only time an event is removed is when you remove the event or remove the element. transformation will never remove the event or the element.
document.getElementById("testButton").addEventListener("click", function() {
alert("It works");
});
document.getElementById("flipButton").addEventListener("click", function() {
if (document.getElementById("testButton").style.webkitTransform == "rotateX(0deg)") {
document.getElementById("testButton").style.webkitTransform = "rotateX(90deg)";
document.getElementById("test").style.webkitTransform = "rotateX(90deg)";
} else {
document.getElementById("testButton").style.webkitTransform = "rotateX(0deg)";
document.getElementById("test").style.webkitTransform = "rotateX(0deg)";
}
});
<html>
<body>
<button id='testButton'>test button</button>
<div id='test'>
<div><a href='http://www.google.com'>Click me</a></div>
</div>
<button id='flipButton'>transform button</button>
</body>
</html>
Here is an example using your example:
.test {
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateX( 90deg);
}
.test>* {
-webkit-transform: rotateX( -90deg);
}
<html>
<body>
<div id='test'>
<div><a href='http://www.google.com'>Click me</a></div>
</div>
</body>
</html>
You will notice that it still works. The reason your code is not working is that your href you have href='htpp://boom'. The URI htpp://boom is not a real address.
There is no such thing as htpp:// and boom is not an address. Your bug in your code has nothing to do with transformation and nothing to do with css. Your bug is not using a real URI.
The -webkit-transform property may be functioning properly in displaying either element(s) at rotateX(90deg), or rotateX(-90deg), respectively.
Whereas at rotateX(90deg), the elements would not be expected to be rendered "view-able", or "visible".
The element(s) would be "flattened" along their X axis, as it were.
At rotateX(90deg) the css is probably transform 'ing the element(s) to just that - 90 deg (rees) sic.
Please see linked jsfiddle, with the css trasform property set to rotateX(45deg), and rotateX(-45deg), respectively, to view the prospective rotateX((n)deg) progression, at 45deg.
Again, the transform property may simply be attempting to achieve a true 90 deg (ree) sic angle, which, along the X axis, might resemble - if visible -
_
or a "horizon".
| - Y axis
_ - X axis
jsfiddle http://jsfiddle.net/guest271314/3XpFG/
Edit (update, workarounds)
You're answer does not mention the clickable area. Also, your demo
does not provide a workaround that preserves the click area. – Mark Lundin
If requirement includes setting css property rotateX() value to 90deg, element may appear to render similar to display : none;, that is, render virtually "invisible" on screen.
See http://jsfiddle.net/guest271314/N6MdE/
Workarounds
1) applicable to both options a), and b), below
html
<!-- add `tabindex` attribute to `.test > a`,
whether `element` rendered "visible", or "invisible",
pressing `Tab` `key` possible to select `a` `element`,
possibly add `title` attribute,
both `attributes` added for "notification",
of `a` `element` ("link") presence at that `position` in `document`,
still possible to `navigate` to `a` `link`, utilizing `Tab` `key`
-->
Click me
a) Render elements at css property rotateX(89deg), rotateX(-89deg), respectively, which should render the elements on screen, perhaps preserving at least some of the "effect" such a ndeg "rotateX()", offset by 1deg. jsfiddle http://jsfiddle.net/guest271314/bzdak/
.test{
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateX( 89deg );
height : 50px;
opacity : 1.0;
}
.test > a{
-webkit-transform: rotateX( -89deg );
}
.test:hover, .test a:hover {
-webkit-transform : rotateX(0deg);
outline : thin solid blue;
opacity : 1.0;
cursor : pointer;
}
.test a:link, .test a:active {
color : #c17d11;
font-size : 24px;
}
b) Render elements at css property rotateX(89deg), rotateX(-89deg), respectively, including css property opacity value set to 0.9, which should render the elements virtually "invisible", similar to a rotateX(90deg) rendering (see http://jsfiddle.net/guest271314/N6MdE/), adding css :hover and/or :active pseudo elements, either, or both, for "notification" of a element ("link") presence at that position in document jsfiddle http://jsfiddle.net/guest271314/De7P6/
.test{
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateX( 89deg );
display : block;
height : 50px;
opacity : 0.9;
}
.test > a{
-webkit-transform: rotateX( -89deg );
}
.test:hover, .test a:hover {
-webkit-transform : rotateX(0deg);
outline : thin solid blue;
opacity : 1.0;
cursor : pointer;
}
.test a:link, .test a:active {
color : #c17d11;
font-size : 24px;
}
Related
I'd like to have links zoom in when the mouse hovers on them, I've tried with transform unsuccessfully, but then I found this answer, which looked promising.
However, making an inline element an inline-block also seems to prevent it from being split across several lines, as shown in the snippet below, which can create very unpleasant results for short width of the enclosing box.
div {
border: 1px solid black;
text-align: justify;
width: 20em;
}
a {
text-decoration: none;
display: inline-block;
}
a:hover {
transform: scale(1.01);
}
<div>
<p>Today, <a href="https://github.com/Aster89/WinZoZ">my
Vim plugin for easy window navigation</a>, which I named
WinZoZ,
has got its first star! Given <a
href="https://stackoverflow.com/questions/69007954/vim-remap-ctrl-w-in-insert-mode-to-behave-as-it-does-in-normal-mode#comment121984179_69007954">this
comment on StackOverflow</a>, the star is from the user #yolenoyer.
</p>
</div>
On the other hand, in this specific example above I see that the first link is so long that it does split across lines, so it looks like inline-block elements can indeed do that. How can allow it when they are shorter than the text width?
The animation missing is due to the original link (a tag) element not having the transition: property defined. Per the positioning documentation here it seems only inline-block is suitable for flowing text and that fails to show wrapped text, even with wrap: break-word; present. The inline-flex, inline-grid don't work either since they are both block display types.
One solution would be to break the text lines at certain points and setting different <br> elements to show at different #media widths for certain page widths/devices. However the inline-block elements cannot wrap like normal text, so the breaks just end up making it a 2-line block in the middle of the text.
div {
border: 1px solid black;
/* text-align: justify; */
width: 20em;
}
a {
text-decoration: none;
/* new */
transition: transform .15s; /* Animations: "transform" on a-tag must be present */
display: inline-block;
}
a:hover {
transform: scale(1.01); /* then we transform the transition here */
-ms-transform: scale(1.01); /* IE 9 */
-webkit-transform: scale(1.01); /* Safari 3-8 */
}
<div>
<p>Today, <a href="https://github.com/Aster89/WinZoZ">my
Vim plugin for easy window navigation</a>, which I named
WinZoZ,
has got its first star! Given <a
href="https://stackoverflow.com/questions/69007954/vim-remap-ctrl-w-in-insert-mode-to-behave-as-it-does-in-normal-mode#comment121984179_69007954">this
comment on StackOverflow</a>, the star is from the user #yolenoyer.
</p>
</div>
Some JS scripting
A breaking up of the line into blocks in a ul list with the li items being inline-block themselves could be a solution. A function to run at DOM load on each desired div's contents could do this. A loop for all a elements in those divs that transform each of the links into an array of words and puts the array items in a ul -> li. Perhaps there is a jQuery plugin for this already.
Light JS example
(not complete code, but using querySelectorAll, which could be used to gather the links from a <div> with a class you put as the function input):
<script type="text/javascript">
// function to look for a-tags in a DIV with a specific class
function linkToList(inputDivClass) {
// get the links inside the div with the input div class
const allLinks = document.querySelectorAll("div." + inputDivClass + " > a");
for (var i = allLinks.length; i < 0; i++) {
// here we go through the links returned from the div...
}
// then go through the data and see what to put where...
}
// when dom is loaded we run the function that looks for the divs with the a-tags...
document.addEventListener("DOMContentLoaded", linkToList(inputDivClass) );
</script>
I've put together a very basic tab image gallery and am now in the process of styling it, but am having some trouble getting the 'default' thumbnail to load with max opacity. My jQuery is also messing with my hover css. I did try using the focus/active css to set opacity to 1 on click rather than jQuery, but it didn't seem to work.
Desired effect
The page loads and image 1 is shown in the main image frame. The thumbnail for image 1 has full opacity while the other 3 have opacity:0.8. When hovering over an unselected thumbnail, opacity:1. After clicking a thumbnail, the picture in the main frame changes and the opacity of the newly clicked thumbnail is set to 1 (whilst the opacity for image 1 returns to 80%).
Issues
The 'default' thumbnail loads at 80% opacity rather than 1.
If I add the latter 2 lines to my jQuery (shown below) to set opacity on click, the 'hover' effect stops working after something has been clicked.
jQuery(document).ready(function() {
$(".thumbnail").click(function() {
$("#mainimage").attr("src", $(this).attr("src"));
$(".thumbnail").css("opacity", "0.8");
$(this).css("opacity", "1");
});
})
#thumbnails img {
display: inline-block;
width: 20%;
cursor: pointer;
overflow: hidden;
opacity: 0.8;
}
#thumbnails img:hover {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id='gallery'>
<div id='panel'>
<img id='mainimage' src='https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/large-breed-dogs-1581096488.jpg' width=80% />
</div>
<div id='thumbnails'>
<center> <img src='https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/large-breed-dogs-1581096488.jpg' class='thumbnail' style='opacity: 1;'><img src='https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/golden-retriever-puppy-lying-down-on-grass-royalty-free-image-1587052215.jpg' class='thumbnail'><img src='https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/gettyimages-589656325-1-1586896598.jpg' class='thumbnail'><img src='https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/chihuahua-dog-running-across-grass-royalty-free-image-1580743445.jpg' class='thumbnail'></center>
</div>
</div>
Edit: By setting the opacity of the default image to 1 using <... style=opacity:1;> I'm able to get it to have default opacity on page load. I fiddled around with another jQuery that changed opacity on hover, but this had the negative affect of setting the opacity of the thumbnail that was last hovered over to 1 rather than the one that was last clicked. At this point, the main issue us that my hover css is not working with the jQueryposted above.
When you use jQuery to set a CSS attribute you are adding it inline. Inline styles override CSS styles. The only way to get around this is to stick an !important after the style that you want to override the inline. In your case, its on the hover.
Hierarchy of CSS works like this, in order of importance and priority being rendered. Ie, if 1 isn't there, render 2 and so on:
CSS Style with !Important
Inline style
ID
Specific Class
Less specific class
See working snippet below:
jQuery(document).ready(function() {
$(".thumbnail").click(function() {
$("#mainimage").attr("src", $(this).attr("src"));
$(".thumbnail").css("opacity", "0.8");
$(this).css("opacity", "1");
});
})
#thumbnails img {
display: inline-block;
width: 20%;
cursor: pointer;
overflow: hidden;
opacity: 0.8;
}
#thumbnails img:hover {
opacity: 1!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id='gallery'>
<div id='panel'>
<img id='mainimage' src='https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/large-breed-dogs-1581096488.jpg' width=80% />
</div>
<div id='thumbnails'>
<center> <img src='https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/large-breed-dogs-1581096488.jpg' class='thumbnail' style='opacity: 1;'><img src='https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/golden-retriever-puppy-lying-down-on-grass-royalty-free-image-1587052215.jpg' class='thumbnail'><img src='https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/gettyimages-589656325-1-1586896598.jpg' class='thumbnail'><img src='https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/chihuahua-dog-running-across-grass-royalty-free-image-1580743445.jpg' class='thumbnail'></center>
</div>
</div>
I'm have a vertical stack of items to which the user can append one by clicking a button, roughly like this.
<ol>
<li><textarea></textarea></li>
<li><textarea></textarea></li>
</ol>
<a data-action="additem">Add another</a>
I'm trying to write a CSS animation so that when the new li is inserted, the "Add another" smoothly slides down to its new resting place. Fixed height on the li tags is not an option, and I'm trying to avoid using the max-height animation hack because it can have weird layout effects.
I figured out that I could animate margin-bottom from something to 0 and have the desired effect, but I can't figure out how in CSS to express that I want the current height of the element to which this rule is applied. Percentages are measured relative to the width of the element, which isn't what I need here, and I can't think of a clever trick using calc or the like to express what I want to the browser.
Suggestions?
EDIT
I'm using a template with a repeat binding to add the items to the list. The JS only pushes another object into an observable array, and the framework handles the actual DOM insertion. The li tag has on it the following CSS to get it to enter smoothly:
animation: append forwards .5s;
And append is defined as:
#keyframes append {
from {
transform: translateX(10%);
opacity: 0;
margin-bottom: _____;
}
to {
transform: none;
opacity: 1;
margin-bottom: 0;
}
}
Not currently...
I've come up against this frustrating issue a number of times, always trying to either animate a non-numeric value, access a specific property of the current element as an animation value, or animate an unspecified value to a specified one. Generally I always have to fall back to either some form of not-quite-perfect max-height animation (like you've already mentioned) or use a mixture of CSS and JavaScript/jQuery.
For your issue there are a few options, but none are exactly what you're after.
css only version (using duplicated markup and another animation)
http://jsfiddle.net/7m8F9/2/
http://jsfiddle.net/7m8F9/3/ <-- improved version using bottom and position:relative
http://jsfiddle.net/7m8F9/5/ <-- even better version, going back to translateY
One trick often used with CSS-only hacks, is to duplicate markup — in this instance, the link iteself — and place it within parent wrappers that will be turned on or off by different means. The downsides to this method are that you get a rather ugly markup, and in this particular instance a bullet-number that appears jarringly (because of having to move the opacity animation from the li to the textarea).
The benefits of this method however are that by moving the link inside the li you can use -100% on the y-axis with a translate, or another offset method. Oddly though I can't work out what translateY(-100%) is calculating based upon... it doesn't seem to be the parent height, perhaps it is the height of itself. For this reason I've updated the fiddle to use bottom and relative positioning instead, although in Firefox (on mac) this glitches briefly.
It does seem to be that translateY is calculating percentage based on it's own height, so in order to get around this problem I've had to make use of position absolute and force the the link layer to assume the same dimensions as the li... annoying, as it involves z-indexing the textarea above the link, and an internal span to offset the link text, but at least it does work.
The following code works in the latest Firefox, and would work in other modern browsers if all the different browser-prefixes were correctly used to define the animation keyframes, I don't have time to set them all up right now however.
markup:
<ol class="list">
<li><textarea></textarea><a class="add" href="#"><span>Add another</span></a></li>
<li><textarea></textarea><a class="add" href="#"><span>Add another</span></a></li>
</ol>
css:
ol li {
position: relative;
}
ol li .add {
display: none;
}
ol li:last-child .add {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
width: 100%;
height: 100%;
display: block;
animation-duration: 1s;
animation-name: slide;
}
ol li:last-child .add span {
position: absolute;
bottom: -20px;
}
.list li textarea {
position: relative;
animation-duration: 1s;
animation-name: append;
z-index: 1;
}
#keyframes append {
from {
transform: translateX(10%);
opacity: 0;
}
to {
transform: none;
opacity: 1;
}
}
#keyframes slide {
from {
transform: translateY(-100%);
}
to {
transform: none;
}
}
javascript version (code triggered translations)
http://jsfiddle.net/7m8F9/1/
The following obviously doesn't take into account the fact that you are using a template engine to power your DOM manipulations, but all the code needs to work properly is a before and after height of the list (to calculate the difference in height), and an event to trigger at the point where the new list item is added.
Sadly it is not yet possible to do this all in pure CSS, at least not as far as I have seen, perhaps once calc has leveled up...? Or perhaps if some way is introduced to reference the current elements dimensions, not just it's offset parent.
It should be noted I didn't have Internet Explorer around to test this with, but all other modern browsers seem happy.
markup:
<ol class="list">
<li><textarea></textarea></li>
<li><textarea></textarea></li>
</ol>
<div class="add">
Add another
</div>
javascript (with jQuery):
function prefix(){
for ( var a = ['Webkit','Moz','O','ms'], i=0, l = a.length; i<l; i++ ) {
if ( document.body.style[a[i]+'AnimationName'] !== undefined ) {
return { js: a[i], css: '-' + a[i].toLowerCase() + '-' };
}
}
return { css:'', js:'' };
}
$(function(){
$('.add a').click(function(e){
e.preventDefault();
var pref = prefix(),
link = $(this).parent(),
list = $('.list'),
lihi = list.height(),
liad = $('<li><textarea></textarea></li>').appendTo(list),
lihd = lihi - list.height();
link.css(pref.css + 'transform', 'translateY(' + lihd + 'px)');
setTimeout(function(){link.addClass('translate-zero transition-all');},0);
setTimeout(function(){
link.css(pref.css + 'transform', '');
link.removeClass('translate-zero transition-all');
},500);
});
});
css:
.transition-all {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.translate-zero {
-webkit-transform: translateY(0) !important;
-moz-transform: translateY(0) !important;
-ms-transform: translateY(0) !important;
-o-transform: translateY(0) !important;
transform: translateY(0) !important;
}
.list li {
animation-duration: 1s;
animation-name: append;
}
#keyframes append {
from {
transform: translateX(10%);
opacity: 0;
}
to {
transform: none;
opacity: 1;
}
}
redesign version
A number of times I have hit a similar issue, only to find a redesign helps do away with the problem and can often actually improve usability. In your case it may be best to place the "add link" above the list (or top right), or integrate the button as a floating icon somewhere... where-ever you put it, it is best to try and keep it in a static location, moving interaction points can be annoying for users, especially if they wish to add more than one item in quick succession.
The simplest solution that i could think of is this.
When you add a new li element, just append it in the dom.
liMarkup = '<li><textarea></textarea></li>'
$('ol').append(liMarkup);
$('ol').find('li').last().css('display','none');
$('ol').find('li').last().show('fast');
This would work as per your requirement :) I hope it helps.
Working Jsfiddle
EDIT: Its easy and better to do it in JS.
Given the following HTML elements and their styles, the bottom left corner of the reflection is trimmed, which is undesirable. I have tried adjusting the height, overflow, margin, padding, etc. and nothing has made the entire image show. Whats the problem here in the first place? Is there anything I can do without changing the structure of the HTML?
//Elements
<div>
<img id="someImage" src="some-img.png"/>
<section class="reflection"></section>
<div>
//Styles
div {
perspecive:600px;
transform-style:perserve-3d;
}
div > img {
transform:rotateY(-60deg);
}
div > .reflection{
background:-moz-element(#someImage) no-repeat;
transform:scaleY(-1);
}
Only works in Mozilla:
http://jsfiddle.net/zorikii/RWfhc/
If anyone is interested its a pretty simple solution. The -moz-element() function takes the element exactly as it is displayed on screen.
The element() CSS function defines an value generated from an arbitrary HTML element. This image is live, meaning that if the HTML element is changed, the CSS properties using the resulting value are automatically updated. - MDN
So all I had to do was add some padding to the top of the original image element...
img{
transform:rotateY(60deg);
-webkit-transform:rotateY(60deg);
padding-top:100px;
}
.reflection{
background: -moz-element(#someImage) no-repeat;
height:400px;width:200px;
-moz-transform: scaleY(-1);
transform: scaleY(-1);
}
Updated Fiddle
You need to set the transform "origin", like this:
html{
background:black;
}
div{
perspective:600px;
-webkit-perspective:600px;
transform-style:preserve-3d;
-webkit-transform-style:preserve-3d;
/* sets origin slightly higher so it just off center */
-webkit-transform-origin: 50% 40%;
}
img{
transform:rotateY(60deg);
-webkit-transform:rotateY(60deg);
}
.reflection{
background: -moz-element(#someImage) bottom left no-repeat;
height:300px;width:200px;
-moz-transform: scaleY(-1);
}
I've run into a rather strange problem. I have a div that is rotatable via CSS3. The div has a front div child and back div child, with the back div having -webkit-transform: rotateY( 180deg ) set.
The problem that once the parent element is rotated to display the back side of the div, it will only detect clicks of child elements on exactly one side of the div, specifically the second half of the div or right side. The front side div detects clicks on the entire face of element. Also, the z-indexes are fine. I assume that the issue may be due to the rotation and the browser displaying one half of the side "closer"?
The code that this is breaking is extremely complex, so I created a test file to demonstrate the problem below. I'm using a jQuery plugin I wrote for the 3D transformations, which can be found here https://github.com/pwhisenhunt/jquery.transform/blob/master/jquery.transform.js.
Edit: After experimentation, the clicking of the button element is only registering from 100-200px and not from 0-100px. In other words, it is in fact only registering on the second half of the div.
Any help is very much appreciated!
<html>
<head>
<style>
.element{
width:200;
height:200;
-webkit-perspective: 800;
-webkit-transform-style: preserve-3d;
}
.element figure {
display: block;
height: 100%;
width: 100%;
position: absolute;
-webkit-backface-visibility: hidden;
border:1px solid yellow;
}
.element .front {
-webkit-border-radius:8px;
padding: 0px;
margin: 0px;
background-color:yellow;
z-index: 9870;
}
.element .back {
-webkit-border-radius:8px;
padding: 0px;
margin: 0;
-webkit-transform: rotateY( 180deg );
z-index: 0;
border: 1px solid red;
background-color:green;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="https://raw.github.com/pwhisenhunt/jquery.transform/master/jquery.transform.js"></script>
<script>
$(function(){
var temp = false;
$(".element").click(function(){
if(temp == false){
$(this).transform("setAnimationDuration", 1).transform("rotateY", 180);
$(this).unbind("mouseenter mouseleave");
button = $(document.createElement('div')).attr("id", "button").css({ width: 200, height: 50, backgroundColor:"blue" });
button.click(function(){
console.log("Clicking");
});
temp = true;
$(this).append(button);
}
})
})
</script>
</head>
<body>
<div class="element">
<figure class="front"></front>
<figure class="back"></front>
</div>
</body>
</html>
A JSFiddle Example of the Problem - Can be found HERE!
I know this reply is a bit too late for most of us here, but I ran into this problem earlier today, and none of the replies helped me solve it.
Solution by #kristiankeane made the other half non-clickable. I was using a container for the wrapper as well. Turns out, it's an odd bug in webkit, and I was able to fix it and make 100% of the element clickable by changing transform: rotateY(180deg) to transform: rotateY(-180deg)
It's really odd, and I don't know how it worked, but it did. I hope this helps someone!
I had this exact same issue, was able to fix it by slightly changing the parent rotation when flipped - I changed
`.flip-holder.flipped {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}`
to
`$.flip-holder.flipped {
-webkit-transform: rotateY(180.5deg);
-moz-transform: rotateY(180.5deg);
transform: rotateY(180.5deg);
}`
and the entire backface (plus overflowed elements positioned absolutely) were now clickable, and the browser did not render the extra 0.5deg of rotation so text and images are clear.
Translate both front and back just a little bit and they won't overlap.
Example:
.element .front {
-webkit-transform: translateZ(1px);
}
.element .back {
-webkit-transform: rotateY(180deg) translateZ(1px);
}
it seems that you are missing a container (in much the same way I was missing it).
see the official documentation
it's not the outer element being flipped, but a wrapper inside it. that in turn causes one of two divs to be displayed (and the transition to occur)
If your flip card structure is like this:
<div class="flipcard">
<div class="flipcard-front">
</div>
<div class="flipcard-back">
</div>
</div>
then add this to your CSS:
.flipcard:hover {
pointer-events: none;
}
.flipcard-back:hover {
pointer-events: auto;
}
could It be (and I'm just speculating) that you should use a live or delegate event bind instead of the regular. I'm speculating the click event maybe 'remembers' some how the original div position without the rotating.
After all tricks as rotate to back and rotate to 180.5 and other...
problem fixed only the following way:
When the rotation ends - create new element, clone html from rotated element, and insert new element instead of old