给定以下标记和样式
div {
width: 300px;
height: 50px;
border: 1px solid black;
display: inline-block;
transition: all .1s ease-in-out;
background-color: white;
padding: 0px 5px;
}
div:hover {
transform: scale(1.2);
}
label {
/*position: relative;*/
}<div>
<label>some random text</label>
</div>
<div>
<label>some random text</label>
</div>当将鼠标悬停在第一个元素上时，div第二个元素中的一些字母div将“隐藏”在缩放元素下。但是，当在元素position: relative上设置时label，文本将在缩放后的元素上呈现：
div {
width: 300px;
height: 50px;
border: 1px solid black;
display: inline-block;
transition: all .1s ease-in-out;
background-color: white;
padding: 0px 5px;
}
div:hover {
transform: scale(1.2);
} …我在没有特定选项的情况下初始化了一个 Intersection Observer，因此阈值等于 0.0，并且事件应该在被观察元素的第一个像素进入视口时触发。
这就是当我通过滚动触发观察者以及使用一个简单的 CSS 属性定义的过渡来触发它时发生的情况，如top. 但是当观察到的元素出现在视口中时，由于使用过渡动画的 CSS 变换，观察者在动画结束之前不会触发回调。我需要在元素出现在视口内的那一刻触发它，因为它应该是.
你可以在这里看到一个例子：https : //jsfiddle.net/38v2dots/2/
我现实世界的问题是一个旋转木马库（不必要地）与 CSS 3D 转换一起工作。但问题也发生在 2D 变换中。不幸的是，我不得不使用这个库，因此无法避免 3D 变换。
先感谢您。
javascript css css-transitions css-transforms intersection-observer
我想将 div 从其中心点移动，但似乎translate()并不关心变换原点是什么，而是使用元素的左上角来移动它。
这是一个测试来证实这一点：
<div class="items" style="">
<div class="item-1" style="width: 100px; height: 100px; background: blue; position: absolute; opacity: 0.5; transform-origin: 0% 0%; transform: translate(100px, 100px)"></div>
<div class="item-2" style="width: 100px; height: 100px; background: red; position: absolute; opacity: 0.5; transform-origin: 100% 100%; transform: translate(100px, 100px)"></div>
</div>正如您所看到的，机器人项目重叠了，而它不应该重叠。
问题：如何使用中心点定位元素？
注意：由于我使用 JS 旋转和移动这些项目，因此仅减去项目宽度/高度的一半不是一个选项，因为它需要我不知道的数学。
尝试在父 SVG 中定位电池指示器。SVG<svg viewBox="0 0 24 24">元素具有电池路径和显示百分比的文本元素。它通过几个 css 转换和文本属性进行定位。在 chrome 中打开时，文本位置正确/firefox 但在 safari 中是分支。
<text
text-anchor="middle"
dominant-baseline="middle"
style="transform:translate(50%,98%) scale(.2);
font:700 13px sans-serif;fill:#deba78"
>24.2%</text>
如果没有视觉示例，很难用文字来解释我正在寻找什么，所以这里是基本思想：https : //codepen.io/jwiggiff/full/xxwvVbr
var cube = $('.cube');
var wrapper = $('.wrapper');
$(document).mousemove((e) => {
if(!cube.hasClass('locked')) {
var deltaX = e.pageX - (wrapper.offset().left+(wrapper.width()/2));
var deltaY = e.pageY - (wrapper.offset().top+(wrapper.height()/2));
var rotateY = deltaX/($(document).width()/2) * 90;
var rotateX = deltaY/(($(document).height()/2)) * -90;
cube.css("transform", " rotateY("+rotateY+"deg) rotateX("+rotateX+"deg)");
}
});
$('.top-label').click((e) => {
cube.toggleClass('locked locked-bottom');
$('.labels div:not(.top-label)').fadeToggle();
});
$('.bottom-label').click((e) => {
cube.toggleClass('locked locked-top');
$('.labels div:not(.bottom-label)').fadeToggle();
});
$('.left-label').click((e) => {
cube.toggleClass('locked locked-right');
$('.labels div:not(.left-label)').fadeToggle();
});
$('.right-label').click((e) => {
cube.toggleClass('locked locked-left');
$('.labels div:not(.right-label)').fadeToggle();
});/* …我注意到在使用硬件加速优化动画以便在iPad上使用时,我似乎遇到了一个我无法完全解决的问题.如果您正在应用webkit变换(例如translate),尽管动画运行得很好,如果在动画中间出现用户滚动页面,当它们释放时会导致动画断断续续,从而恢复到原始位置并尝试继续它的动画是它的终点.
我一直在寻找解决这个问题的地方,看到它也出现在iPad商店!如果您手头有iPad并导航到,例如:http://webkit.org/demos/transitions-and-transforms/,如果选择项目,则在按钮动画完成之前拖动页面(滚动)然后释放它,你会看到动画闪烁回原来的位置,然后重复直到它完成.
我能够解决这个问题的唯一方法就是当触摸移动事件发生时,我告诉动画只停留在原始位置的位置,这会阻止它尝试重复发布时的转换,因为甚至试图告诉它再去哪里导致它无论如何还原(看到css过渡似乎在技术上无法停止).
有没有人找到这个问题的任何变通方法,我很确定这是iPad上的一个错误,而不是动画的问题(这不涉及有关保留-3D和你有什么的问题),或者我应该报道这是一个问题.
谢谢!
我可以transform: rotateY用div来对抗transform: rotateY他的父母吗？
例如:
如果我有一个父div rotateY(-45deg),他所有的孩子将是-45deg.
为什么我不能添加rotateY(45deg)给孩子让它看起来像没有轮换影响呢？
演示:http://jsfiddle.net/eBT4A/
我正在使用我的页面上的旋转CSS3转换,当我发现backface-visibility它的值是"隐藏" 时,我发现它与属性不一致.我在JSFiddle中重现了这个问题.
HTML:
<div class="card">
<div class="front">
<button>Flip to the back face</button>
</div>
<div class="back">
<button>Flip to the front face</button>
</div>
</div>
此代码应代表一张卡片,正面有"front"div,背面有"back"div.我正在使用该backface-visibility属性以避免在翻转时卡片上出现正面的镜像内容.
如果您在Firefox中打开小提琴,您会注意到单击"翻转"按钮将导致页面右侧出现镜像"翻转"按钮,尽管将backface-visibility前一个div 的属性设置为"隐藏".单击"翻转"按钮(不是镜像按钮)将把卡翻转到其原始位置,镜像的"翻转"按钮将消失.
如果您在Chrome中打开小提琴,单击"翻转"按钮不会创建镜像"翻转"按钮,这很好.不幸的是,背面的"翻转"按钮不再可点击.
总之,backface-visibility在两种浏览器中都不希望出现该属性的行为.如何更改我的代码,以便镜像内容不可见,并且两个浏览器中的内容仍然可以点击？
更新:将background"后退"div 设置为#FFF(或任何颜色)使其不透明,在Firefox中运行小提琴时隐藏"前"div中的镜像按钮.Chrome的问题仍然存在.
我有一个仅限CSS的翻转卡片动画,当用户将鼠标悬停在容器上时,会显示卡片的另一面:https://jsfiddle.net/qb7unks5/3/.
卡的两侧应该是可点击的链接.理想情况下,整个容器都是可点击的链接,但我的代码在Firefox中不起作用.因为JSFiddle中的链接永远不能在Firefox中工作,所以你实际上无法通过使用JSFiddle看到这一点,但是如果你要保存代码并独立运行它,你会发现,通常情况下,链接无法在Firefox下激活情况:
(1)当您快速将鼠标移动到容器中并单击红色卡片的文本时.文本变黑,表示a:active已触发效果,但实际上未激活链接.
(2)当卡片翻转动画处于活动状态时,单击灰色边框容器的白色(非红色,非蓝色)区域时,链接有时无法激活.
这两个问题似乎只发生在Firefox中,而不是Chrome.而且,由于Firefox中的JSFiddle如何处理链接,你无法通过使用JSFiddle链接来说明.
问题是,显然,如果你点击一个与Firefox中的旋转图形有某种关联的链接,并且该图形几乎立即 "旋转" ,a:active则会触发链接状态,但链接不会被激活!
所以,我假设我必须创建一个<a style='display:block'>容器大小和形状相同的块,使其z-index高于数字,并且通过这样做,基本上使整个区域容器可通过与图不直接相关的链接进行点击.有没有更好的解决方案？
figure {
margin: 0;
}
.container {
width: 200px;
height: 260px;
position: relative;
margin: 0 auto 40px;
border: 1px solid #CCC;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
.card {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: …问题是,该transform属性的值有多个零件一样translate,scale等等.
这是关于元素的理论问题,让我们.loader有transform:translate(10px, 10px)和动画我想动画的scale属性.在这种情况下,浏览器将不会采取transform:translate(10px, 10px)并将只采取scale.
我正在寻找解决这个问题的方法.
这是这个问题的一个例子.请注意,我不是在寻找这个特定示例的答案(比如:包装元素或将translate值添加到动画定义中),而是一个通用解决方案(当然,如果存在).
.loading {
position: relative;
width: 100px;
height: 100px;
background: #eee;
}
.loading:before,
.loading:after {
content: "";
width: 50%;
height: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background-color: #fff;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
/* the broswer doesn't take this */
transform: translate(100px, 300px);
-webkit-animation: bounce 2s infinite ease-in-out;
animation: bounce 2s infinite ease-in-out; …css-transforms ×10
css ×8
css3 ×4
html ×4
javascript ×2
3d ×1
animation ×1
css-position ×1
ipad ×1
rotation ×1
safari ×1
svg ×1
transform ×1
webkit ×1