translate3d

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

由 倾然丶 夕夏残阳落幕 提交于 2019-12-22 13:51:56
问题 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;

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

由 可紊 提交于 2019-12-22 04:20:34
问题 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;

webkit translate3d issues (peek-thru)

由 雨燕双飞 提交于 2019-12-21 12:10:10
问题 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

css 动画库 Animate.css 使用

由 孤街浪徒 提交于 2019-12-19 05:43:35
1.css动画可以增加页面的趣味性，搞点动态的效果。这里就要提到一个非常好用的css动画库 Animate.css了。一些常用的 飞入飞出，跳动啊等等，自己去网站试试吧： http://www.jq22.com/yanshi819 2.使用方法 引入css库：<link rel="stylesheet" href="css/animate.min.css"></link> 如果你想让那个元素有动画效果，只需要如下使用：添加对应的类 <image src="images/index9/lianxi.png" class="animated c1 fadeInDown" /> 简单介绍一下类名的用处： animated：是动画的标识，必选； c1: 我定义的只运行一次，当然你也可以一直播放，那就用 " infinite " . animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.c1 { -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } fadeInDown: 是动画的方式，飞入从上面掉下来；下面有很多，可以去npm看api

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

由 拜拜、爱过 提交于 2019-12-12 09:26:15
问题 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">

How do I get the absolute value of translate3d?

由 好久不见. 提交于 2019-12-11 14:29:26
问题 How would I go about converting a negative translate3d value into a positive number? For example: var val = $m('slider').style.webkitTransform; console.log(val); // this returns a number like: translate3d(-93px, 0, 0); How would I go about converting the values into positive numbers so that my output is: translate3d(93px, 0, 0); // positive 93 回答1: It is better to keep track of your coords also in JS if you can, but if this isnt possible, you need to parse out the individual values from the

Css transition animation not working with .appendChild

由 徘徊边缘 提交于 2019-12-11 03:14:25
问题 I'm making a game with javascript and css and so on. Animation of character is slow in some mobile browsers. Now it is working with a callback. User request tile, server looks if tile is free, server send packet to move avatar. so user is going to walk to that tile, server sends tile where to go . var movecallback = avatars.moved(id); movelayer('ava_'+id, ava_x, ava_y, 25, 20, 1, movecallback); before something was done with movecallback function but I remove that and make use CSS3 transform

translate3d() causes clipping in Safari

由 人走茶凉 提交于 2019-12-11 01:52:59
问题 I have a web app that I am developing that relies heavily on absolute positioning, CSS transforms, and CSS transitions. My markup: <div class="wrapper"> <div class="background" ></div> <div class="foreground" > <div class="image" ></div> </div> </div>​ My CSS .wrapper{ -webkit-perspective: 1600; -webkit-perspective-origin-y: 30%; height: 500px; width: 100%; } .background{ position: absolute; background-size: 100% 100%; background-image: url("http://farm9.staticflickr.com/8321/8038059897

iPad 2 Safari shows pixellated html text and images

由 ε祈祈猫儿з 提交于 2019-12-10 03:56:21
问题 We are developing an HTML5 + CSS3 application for iPad and iPhone. The app is working fine on iPad & all iPhones, however, iPad 2 shows html dom objects pixellated on startup, and stays like that, sometimes always, sometimes for a few moments. App is designed for touch and gestures. We used translate3D for hardware acceleration on scrolling objects. We are also using jQuery (v1.7), but the scroller we designed is pure javascript, no frameworks there. jQuery is mostly used in finding/adding

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

由 白昼怎懂夜的黑 提交于 2019-12-08 03:41:35
问题 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
订阅 translate3d