Comments (7)
IE11 doesn't support preserve-3d. It supports other 3d things though so this is a pretty crushing blow!
Potential fix here
http://stackoverflow.com/questions/22848328/css3-3d-transform-dont-work-on-ie11
Though doesn't work in my example. Also not sure what this will do in future versions of IE once the issue is fixed.
In the meantime I am lucky enough that I can have a non-3d fallback for this site/app, so I'm using the Modernizr v3 (beta) to detect preserve3d support.
from 3dtransforms.
Yes, I figured that out in the meantime. We've built a workaround by applying the transform to the child elements as suggested by Microsoft's knowledge base article. I'm not sure if this applies to the demo, but in case someone wants to try, here's what we came up with:
Carousel3D.prototype.transform = function() {
var parentTransform = 'translateZ(-' + this.radius + 'px) ' + this.rotateFn + '(' + this.rotation + 'deg)';
if (!isIE){
this.element.style[ transformProp ] = parentTransform;
}else{
// apply parent transform + child transform to all child elements
var panel, angle, childTransform;
for ( i = 0; i < this.panelCount; i++ ) {
panel = this.element.children[i];
angle = ( this.theta * i );
childTransform = this.rotateFn + '(' + angle + 'deg) translateZ(' + this.radius + 'px)';
panel.style[ transformProp ] = parentTransform + ' ' + childTransform;
}
}
};
from 3dtransforms.
Probably wrong but I don't think that applies to the card flip http://desandro.github.io/3dtransforms/examples/card-01.html as it's the parent you are flipping. Only one of the child elements has any transform, and it's the same as the parent anyway!
from 3dtransforms.
is there any way to get the carrousel to auto-rotate by default ?
from 3dtransforms.
Good news is that MS Edge now supports preserve-3D. Just got to ween ppl off IE11. I plan to use a static fallback with modernizr - unfortunately no fun for IE11 users...
from 3dtransforms.
@flack Do you have a full working code version of your IE fix above?
Here's what I understood and it still does not seem to work. It seems the horizontal movements are working but none of the perspective.
http://codepen.io/iDVB/pen/WxaVar?editors=0010
UPDATE -
NM, I just needed to move the perspective style down one to the carousel since the rotations are now being applied to the children. At least thats what worked and seems to make sense to me.
http://codepen.io/iDVB/pen/WxaVar?editors=0010
Any idea why it seems IE is not handling the depth right in terms of layers? Eg. some of the carousel's background panels seem to be on top of the foreground ones.
from 3dtransforms.
Hi @iDVB ! I checked this solution to the IE problem a couple of months ago and it looked perfect! Came back today to try to learn it, but it doesn't seem to be working. Looks flat on all browsers. What could be wrong? Great work nonetheless!
from 3dtransforms.
Related Issues (20)
- Typo in the `perspective` page HOT 1
- Possible correction in cube.html doc HOT 1
- Hello, I use bootstrap when I wanted to refer to the file, but it does not achieve Responsive web design, Is there a way to achieve automatic scaling this stuff does not destroy the original animated it? I saw inside the parameters of absolute size px, I want it to become relative size, if you look at this idea feasible it? HOT 1
- Added cross-browser and touch-screen events
- Event firing when 3D Transform complete HOT 4
- flipped opacity HOT 1
- transform-origin and Safari HOT 5
- A quick sidenote HOT 1
- Additional Interaction : Allow sliding of finger to roll the next side HOT 1
- Increase or decrease carousel item HOT 2
- js/rotate-box.js HOT 1
- Replace with Images HOT 1
- Carousel with Cube HOT 2
- Error in explanation HOT 1
- Error in example code HOT 1
- Responsive
- backface-visibility in 3D cube
- Card Flip Not Working in Safari HOT 2
- Responsive Example with CSS Variables
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from 3dtransforms.