translate3d

3D transforms (translate3D) appear to be causing sluggish jQuery animations on mobile devices

由 陌路散爱 提交于 2019-12-08 02:55:27
I am using a CSS translate 3D and scale 3D for a responsive navigation menu. On touch devices, more specifically, iPhone, it is causing separate jQuery animations on the same page to perform sluggishly, almost as if it strobes when animating. Can anyone shed any light on this issue? If it is of any relevance, I am using SASS: nav { left: 0; @include transform( translate3d(-100%, 0, 0) ); @include backface-visibility; .nav__block { @include transition( -webkit-transform 500ms ease ); @include transition-delay( ease, 0s ); @include transform( translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9) );

Firefox Mobile: element animated with translate3d flows out from parent container

由 你。 提交于 2019-12-07 13:18:50
问题 I have an element which I animte with translate3d transform. The parent element has overflow: hidden , but on Firefox Mobile 19.0.2 during animation the animated element is visible outside of the parent element. Animating the top property instead of translate3d is working, but it's not hardware accelerated and it's not smooth enough. It works fine on all other mobile and desktop browsers I tested on. I guess this is a Firefox Mobile bug, but does anyone have a workaround for this? Here is

CSS 3D transformed html element with negative z-value doesn't fire events

由 寵の児 提交于 2019-12-06 10:45:33
In the following scenario, we see two divs with applied CSS3 3D transformations within a container. Both should fire a event when they are clicked. In this case an alert is shown, indicating which div was clicked. <!DOCTYPE html> <html> <body> <div style="-webkit-perspective: 600; -webkit-transform-style: preserve-3d; width: 500px; height: 200px; overflow: hidden;"> <div onclick="alert('1');" style="-webkit-transform: translate3d(0px, 0px, -100px); background-color: blue; position: absolute; width: 100px; height: 100px;"> </div> <div onclick="alert('2');" style="-webkit-transform: translate3d

Firefox Mobile: element animated with translate3d flows out from parent container

由 你。 提交于 2019-12-05 22:05:32
I have an element which I animte with translate3d transform. The parent element has overflow: hidden , but on Firefox Mobile 19.0.2 during animation the animated element is visible outside of the parent element. Animating the top property instead of translate3d is working, but it's not hardware accelerated and it's not smooth enough. It works fine on all other mobile and desktop browsers I tested on. I guess this is a Firefox Mobile bug, but does anyone have a workaround for this? Here is jsfiddle link for testing: http://jsfiddle.net/dioslaska/6h8qe/ The minimal test case: HTML: <div id="cont

translate3d() causing jQuery hover/click events to not fire correctly

由 二次信任 提交于 2019-12-05 02:58:19
When analyzing jQuery mouse events on different CSS Animation types, I'm noticing that translate3d causes hover and other events to not fire correctly. In a basic example, I am animating a list of blocks from right to left. On rollover, I am setting the hovered LI background to GREEN. note: tests are built for webkit HTML <div class="container"> <ul> <li>content</li> <li>content</li> ... </ul> </div> CSS .container{ position: absolute; left: 600px; top: 0; } .container ul{ list-style: none; width: 9999px; } .container ul li{ width: 200px; height: 400px; float: left; background: red; margin:

CSS3 transform: translate3d doesn't affect the z-axis?

由 久未见 提交于 2019-12-04 21:04:23
I have this snippet implemented: CSS div { position:absolute; -webkit-transition: all 0.3s ease-out; } .block { background:#fc0; /* YELLOW */ top:50px; left:50px; width:80px; height:40px; -webkit-transform: rotate3d(1,0,0,-55deg) rotate3d(0,0,1,30deg); } .block .part { background:#444; /* GREY */ width:inherit; height:inherit; -webkit-transform: translate3d(0,0,50px); } .block:hover .part { -webkit-transform: translate3d(10px,10px,20px); /* ONLY TRANSFORMS X & Y */ } HTML <div class="block"> <div class="part"></div> </div> Check out this Fiddle for the live example. As you can see, the

Get divs position after translate3d

由 安稳与你 提交于 2019-12-04 12:26:11
问题 In Javascript, when I move an element using the gpu via the translate3d method, the elements style-left position doesnt change at all. As the cpu isnt even aware any motion has occurred. How do I track what the new position of an element is, after moving it via translate3d? 回答1: Use Element.getBoundingClientRect() to get the element coordinates Here's just a small example that retrieves the .left Rect property from a CSS3 translated (animated) element: const box = document.getElementById('box

webkit translate3d issues (peek-thru)

由 你。 提交于 2019-12-04 05:27:33
I'm building an iOS app with PhoneGap. I'm using translate3d CSS animations to create the 'flip' effect. This works great on simpler elements...a DIV with front/back divs and maybe an extra span or two. But when I attempt to flip a larger element...namely the entire screen, I get redraw glitches. What happens as soon as I swap the css class to start the transition, parts of the 'bottom' div pop-through the 'top' div, then the flip happens, then they pop-out again. And it's not the entire element that shows through...it's half of the element split along the axis that I'm doing the translate 3d

CSS3D

由 无人久伴 提交于 2019-12-03 12:58:25
1：透视 2：3D变形函数 3：3D加速 4：开启3D只针对子元素： -webkit -transform -style :preserve - 3 d; -webkit -perspective : 300 ; 调节视角 ： -webkit -perspective -orifin : 25 % 75 % ; translate transform 5：3D加速 -webkit- transform :translate3d( 0 , 0 , 0 ); -moz- transform :translate3d( 0 , 0 , 0 ); -ms- transform :translate3d( 0 , 0 , 0 ); transform :translate3d( 0 , 0 , 0 ); ：开启只有有一个默认的背面 造成一定卡顿 可以设置成hide； ：浏览器FPS 60; 来源： CSDN 作者： 爱lv行 链接： https://blog.csdn.net/u013165804/article/details/70171913

CSS实战笔记(四) 抖动效果

由 痴心易碎 提交于 2019-12-03 05:16:23
1、悬浮抖动 （1）效果演示 （2）完整代码 <!DOCTYPE html> <html> <head> <style> .shape { margin: 50px; width: 200px; height: 50px; line-height: 50px; text-align: center; border: 1px solid black; } .shake:hover { animation: shake 800ms ease-in-out; } @keyframes shake { /* 水平抖动，核心代码 */ 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(+2px, 0, 0); } 30%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(+4px, 0, 0); } 50% { transform: translate3d(-4px, 0, 0); } } </style> </head> <body> <div class="shape shake">horizontal shake</div> </body> </html> 2
订阅 translate3d