Search the Community
Showing results for tags 'transform3d'.
Found 3 results
-
Good day, Can someone help me solving the issue? Have been looking for multiple solution and i don't want to end up using javascript safari hacks. My sample pen works in other browsers but safari. Many thanks in advance.
-
I'm trying to make a behaviour that feels kind of elastic, that when the user moves is mouse (and in the future, his phone), the cards behind the current one move away with a delay between each other. The problem is that for it to be as I visioned it, it would need to move away, based on the centred card, with the exact same values for top/left and bottom/right (confusing, I know, but I hope you understand what I meant). Can you give a little help? PS: For some reason, the demo on codepen isn't adding the transform: translate(-50%, -50%) when the element loads. On my localhost it works as intended... If need be, I can post a sample of what I have locally working. Thank you
-
Hey there, I'm trying to build a small 3d enviroment based off transform3d. I'm using transform3d and a transform3d library - Sprite3d. All it does is create and position 3d css shapes well in perspective and related to their parent. I've been trying to make this with gsap and matrix 3d and it does work, but matrix3d does really crazy things on the app platform i'm publishing to when i do any z transformation or z rotation, or perspective. But i don't want to go into that, the sprite engine is my only way of working at this point and it does work great Working CSS version: http://codepen.io/LuckyDe/pen/PzpjWj The above has a parent container and a child box , the animation is with just basic css. The funtion just changes the transform3d raw properties and then the css automatically animates it. I wanted to be control it with gsap instead but when i tried to move the z axes it did nothing(perspective3d is on so it should have done something) Non Working GSAP version: http://codepen.io/LuckyDe/pen/jrBwyK And if i move the x or y axes (also in the above pen) it deletes all the translate3d and converts it into matrix 3d Which results in the scale being lost and it immediately changes shape from to The only benefit is that i can move x and y z, rotationZ, scaleZ still do nothing And ive tried multiple attempts in multiple different ways, using force3d:true, perspective applied to the box(does nothing) and transform perspective applied ( just changes the perspective, the z axes is still unmovable) I'd really like to be able to have this still use translate3d and not matrix 3d so i dont spend the next month offsetting z axis values like i did before for every uiwebview build of our app when this works great i just need to figure out how to animate it with gsap and not manually with css. So if anyone has any suggestions on either forcing gsap to animate transform3d or how to make a fake gsap tween which returns the move values and i can link that to the css update function in the working version that would be great. At least then I would have some control... Thanks!
