I want to create an svg image file containing some flip animations using css with a stylesheet embedded in the svg file. Chrome can have at least two problems, depending on the exact code used: either the front side of the card remains visible even if you flip, shade the back side, or the back side of the card incorrectly. Here is a simplified version of what I'm trying to achieve:
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" id="svg2" version="1.1"> <style> .outmost { perspective: 100px; transform-style: preserve-3d; } .outer { transform-style: preserve-3d; animation: flip 3s infinite alternate; transform-origin: 50% 50%; } /* Front side */ .outer > :nth-last-child(1) { transform: rotateY(0deg); } /* Backside */ .outer > :nth-child(1) { transform: rotateY(-180deg); } /* Both sides */ .outer > * { backface-visibility: hidden; transform-origin: 50% 50%; } @keyframes flip { 50% { transform: rotateY(180deg); } } </style> <g class="outmost"> <g class="outer"> <rect x="30" y="30" width="40" height="40" fill="red" /> <rect x="30" y="30" width="40" height="40" fill="green" /> </g> </g> </svg>
This is an image with bare rectangles, as in the code above: http://imgh.us/transformorigin_example_1.svg
This is an image with rectangles in groups, for example: <g> <rect … /> </g> : http://imgh.us/transformorigin_example_2.svg
This is displayed correctly in Firefox 44, but it is seriously broken in Chrome 48 (as in MS Windows), and I wonder if there is a way around this error. (I already wrote off the idea of making it work in Internet Explorer - the latter doesn’t enliven the picture at all, which is much better than a broken animation.)
Firstly, Chrome does not seem to respect backward visibility, which destroys the whole card trick: it always shows the same card; the back side does not become visible. I tried to resolve this by animating the flipping of the front and back sides of the map separately, changing the visibility of each exactly when the map rotates to the other side, but this does not work very well in Firefox or Chrome - apparently, the time is not controlled quite tightly therefore two flips are not synchronized.
Secondly, if I put the rect: s inner groups (which corresponds to the realistic use), it still works in Firefox, but Chrome responds to a strange shift of the back side of the map to the left (this, apparently, is due to the fact that the original a rotation designed to put the back side in its original position upside down rotates around the wrong center - in other words, the translation origin property does not look like it has already entered into force at this stage or did it wrong), and then turning all the wok a friend of his new center (which, however, seems to be in translation-origin: 50% 50% object (distorted), as you would expect, only one of the parts is in the wrong position, so the whole effect ends up wrong). Very disgusting.
A few things I tried to no avail: 1) set transform-origin: 50% 50%; inside the ad units marked with / * with the front side * / and / * with the back side * / (so that they are close, according to the code, to the transformation that they should influence); 2) placement of the declaration block / * Both sides * / in front / * Front side * / and / * Rear side * / blocks; 3) placement of style information inside rectangular elements ( <rect … style="…" /> ); 4) (somewhat desperate) by adding the -webkit- prefixes; 5) using -webkit-backface-visibility: visible;-webkit-backface-visibility: hidden; , that is, turning the visibility, then turning it off, as in the answer to this question ; 6) adding "overflow: visible" to the "outer" group, as suggested in this question ; 7) adding an additional transform:rotateY(0deg); or transform: translate3d(0,0,0); as suggested in the same question.
It may also be interesting to know that vocalists with built-in features in the Chrome inspector can sometimes neutralize the second problem (the translation started incorrectly), as a result of which both sides of the card are in the same place, which becomes obvious if the cards are translucent and contain a shape ( but the visibility of the back surface is still not correct), although I could not distinguish any pattern when this happens. This behavior suggests that we can deal with two different errors. It is still possible to achieve this only in the inspector, and not by making changes to the source.
I tried to find information on the Internet, but things like “chrome inverse error - visibility” or “chrome conversion error” didn’t actually display anything useful compared to the ideas I had already tried. (However, this led to this bad quote: “Chrome is full of these SVG conversion errors.”) There are many old, several similar issues with stackoverflow, but none of the following helped: backward visibility: hidden error in chrome , In the Chrome browser, webkit-backface visibility broken? Webkit backlink visibility does not work .
Any ideas?