css-transforms_编程技术问答社区_程序员问答知识库

以下是关于 css-transforms 的编程技术问答

translate3d vs translate performance

我们现在都知道，特别是那个不错的文章，我们应该更喜欢CSS-Transforms来动画位置. ，但我们在translate()和translate3d() ... 之间做出了选择哪个是一般解决方案下面的本网站运行的测试比较translate()，translate3d()和其他几个属性.据此，translate3d()在大多数浏览器中都更快. http://jsperf.com/translate3d-vs-xy 其他解决方案使用Translate3D的使用将CSS动画推入硬件加速度.即使您想进行基本的2D翻译，也使用Translate3D以获取更多功能！因此，" T3D"效果更好，因为它告诉CSS动画以3D功率推动动画！这就是为什么它更快的原因. (卡梅隆的答案很少是证明) 其他解决方案正如卡梅隆建议的translate3d时，在许多浏览器中应该更快，大多数是那些使用GFX硬件加速度来加快渲染加速的浏览器.尤其是在webkit trans

0 2023-05-23 编程技术问答社区 performance css-transforms

为什么在CSS3中启用硬件|加速会减慢性能？

我正在CSS3实验中将10,000个小元素从浏览器视口的顶部移动到底部.对于此测试，我使用两种不同的方法: 使用GPU加速使用translate3D(x, y, z)或translateZ(0) 通过简单地调整CSS 中的top属性，没有GPU加速使用 no 硬件加速器在Google Chrome上运行相当光滑. 如果我启用硬件加速性能会变得更糟.太糟糕了，盒子甚至不再均匀地散开: 使用GPU/硬件加速度: 没有GPU/硬件加速度: 问题为什么是这样?不应该使用GPU改善性能吗? 演示应用程序来源 https://github.com/valnub/hwtest 我用于测试的硬件 Apple Macbook Pro 15" 2015型号 CPU 2,8 GHz Intel Core i7 16 GB RAM MacOS Big Sur 11.2 更新(2014-11-13):由于这个问题仍然引起

0 2023-05-23 编程技术问答社区 css performance css-transitions css-transforms

没有固定背景高度的纯CSS视差？

我正在尝试获得纯CSS视差效应，而无需具有固定的背景高度.这在少数 ploces ，但它们具有共同的约束，即背景层必须具有固定的，已知的高度./p> 我想在没有固定的，由于某些动态内容而具有固定的，已知的高度的效果. 我的最小示例在这里: https://jsfiddle.net/yf8oyben/ 在 #container { position: fixed; top: 0; left: 0; right: 0; bottom: 0; perspective: 1px; overflow-x: hidden; overflow-y: scroll; } .background { transform: translateZ(-1px) scale(2); width: 100%; background: lightgreen; height: 250px; /* Assumes bg heig

0 2023-05-19 编程技术问答社区 css parallax css-transforms

层数大于100vw的水平CSS视差效果

如何使用水平 css仅视频效应? 引导站点要求 CSS仅视差父层必须具有宽度/高度== 100VW/100VH 儿童层必须具有宽度/高度> 100VW/100VH 儿童层必须在视觉上与父层宽度100％保持一致现在，从技术上讲，孩子层确实有100％的父母宽度，但由于perspective，它们在视觉上似乎不占100％的父母宽度儿童层(第一个除外)必须相对于其父具有最高的偏置结果必须基于计算才能具有最大的灵活性必须是交叉浏览器固体(至少最新版本的专业版) 我到目前为止所做的实际上，这个问题是>后续问题. 这是我目前在 css . 工作模拟示例(jQuery) 在javascript中，实现我要寻找的东西非常简单.笔模拟我想模仿CSS的效果. 已经知道的问题我现在最关心的问题是事实，浏览器似乎以不同的方式呈现这种情况.请参阅浏览器窗口(Chrome vs ff)的屏幕截图，滚动到下面的右下角.但我希望这可以避

2 2023-05-19 编程技术问答社区 html css parallax css-transforms

计算带有translateZ的容器在带有透视的父容器内的宽度/高度（相对于父容器）的公式

与父母perspective>(关键字:" parallax")相对于其父母的宽度/高度，用translateZ内部计算带有translateZ的子元素的宽度/高度的配方是什么? 我想创建一个对两个轴都具有视差效应的站点.除了一件事，我能够弄清楚我所需的所有样本所需的一切.当儿童宽度/高度以上时，如何计算其高于100％的宽度/高度. 因为父母的观点和儿童翻译而翻译儿童宽度/高度在视觉上不再与父母的宽度/高度保持一致. 缩放子元素的形式是:1 + (translateZ * -1) / perspective.但是我找不到宽度/高度的公式.顺便说一句:当儿童宽度/高度但是，当 width> = 100％时，请参见下图上图的结果(容器具有最高的偏移以使事物可见). 在我的特殊情况下要正确的方法是让所有子元素在视觉上具有相同的宽度/高度. 在sass(首选)中: pen 或笔从规格的链接可以有所帮助: tr/css-transforms-1/#重新组合到-A

2 2023-05-19 编程技术问答社区 css sass parallax css-transforms

css3 3d变换卡片翻转，padding/margin/border会导致旋转原点混乱，如何解决这个问题？

查看示例，当您单击元素时，它会从front到back旋转，问题是它不是在中心旋转，就像是不平衡的，将鼠标保持在front侧的左边框，单击元素，然后查看back端的位置现在如何关闭.它们应该位于完全相同的位置. 我注意到，当我卸下填充/边框/边框时，它会旋转良好，但是我需要在那里填充填充物和边框.有没有办法用填充和边框来执行此操作 - 以便它会绕中间旋转，而不是向侧面旋转? 解决方案内部divs(#card div)太宽(235 + 50 + 2)和/或#card太窄(245).您必须在总宽度上添加填充和边框，或者或使用 box-sizing: border-box box-sizing: border-box (带有供应商前缀). 其他解决方案您可以通过在"翻转" Div. #card .back { background: #DDD; margin-left: -40px; -webkit-transform: rotateY( 180deg )

6 2023-05-16 编程技术问答社区 css 3d padding margin css-transforms

overflow:hidden在正向翻译中不起作用

我最近遇到了一个奇怪的事情.我将其设置为一个元素，然后我想用translate()转换其中的元素，当它以负面的方向翻译时，它将被隐藏，但是如果我朝着积极的方向翻译，它将不会被隐藏.在桌面浏览器中，它并没有真正显示出来，但是您可以通过一些鼠标工作来达到它.在移动设备上只是卷轴，所以这是最糟糕的. 这是一个显示它的示例: http://csssizer.com/klhlpshw 解决方案所以我整天都在处理类似的事情，并意识到当我有时 html, body {overflow:hidden; } ...如果我添加position:absolute，position:relative或position:fixed在HTML和身体中，它将解决问题. 其他解决方案我将所有内容包装在容器Div中，并使用以下代码包装.在两个方向上明确设置溢出.这可以防止X轴在iOS Safari中滚动，即使在主内容区域的右侧翻译了元素. 但是，除非您添加-webkit-ove

2 2023-05-15 编程技术问答社区 css overflow hidden css-transforms

为什么翻译DIV可以去除溢出？

我尚不完全清楚CSS转换如何影响文档的流程布局和元素的定位.根据有关MDN和W3C的文档，CSS变换不会干扰流布局: 来自 mdn上的mdn我的): 通过修改坐标空间，CSS会改变受影响内容的形状和位置而不会破坏正常文档流量. 因此，如果我们翻译一个元素，原始流程布局应保持完整，转换的结果应纯粹是视觉效果. 一个琐碎的例子如下: .container { background: white; margin: 0 auto; border: 1px solid grey; } .block { width: 100%; height: 100px; } .blue { background: blue; } .red { background: yellow; } .transform { transform: translateY(-200%); }

0 2023-05-15 编程技术问答社区 css css-position overflow css-transforms

文本图像与CSS转换适应网格内的响应式设计（移除缩放）。

我的日期用php和吐出作为图像计算出的日期，读取诸如2月26日，3月3日等诸如字符长度明显不同的日期，我希望这些图像匹配特定的字体大小. 我遇到的问题是使这一切都符合网格，该网格响应灵敏，因为图像不会随着转换的网格而扩展.如果我在某个时候为网格设置了最大宽度，那么大图像逐渐捕捉到较小的图像，它们都变成相同的宽度，使字体大小出现. 有一个全局的IMG最大宽度:100％集，我从phpimages中删除了恢复.顺便说一句，我也必须在纯CSS中进行此操作，因为它是eBay列表，因此不允许JS.我希望这些图像能够响应地缩放，但我希望它们保持字体大小实际上，所以无论单词多长时间看起来都正确. img {max-width: 100%} .rounded-box { display: block; position: relative; z-index: 0; box-sizing: border-box; overflow: hidden; backgroun

8 2023-04-13 编程技术问答社区 html css flexbox responsive css-transforms

从矩阵3d获取精确的旋转角度

我有一些元素旋转转换样式 -webkit-transform: rotateX(-1100deg); 有没有一种方法可以从计算样式获得精确的(-1100)旋转角度? window.getComputedStyle返回matrix3d. var element = document.getElementById('element'), cs = getComputedStyle(element), matrix = new WebKitCSSMatrix(cs['-webkit-transform']); 但是如何从此矩阵中检索旋转角度? 我需要计算的样式，因为我试图在元素过渡过程中获得角度. 解决方案我找不到一种简单的方法，但是借助本文我设法获得了值(一种). var myElement = document.getElementById('element');

4 2023-04-13 编程技术问答社区 javascript html css css-transforms

CSS转换在Mozilla浏览器中不起作用

我正在尝试使用输入/标签的组合创建一个3D动画滑块，以触发单击的过渡，但在Mozilla Firefox中不起作用. 它在铬中的工作原理很好，但是在Mozilla，当我单击时，卡之间没有过渡 https://codepen.io/panfilov/panfilov/pen/pen/gogjvy * { margin: 0; padding: 0; } body { padding: 20px; background: #eee; user-select: none; } [type=radio] { display: none; -webkit-perspective:1000px; -moz-perspective:1000px; } #slider { height: 35vw; position: relative; perspective: 1000px; transform-style: pre

14 2023-04-13 编程技术问答社区 css firefox css-transforms

在Safari浏览器中，SVG文本元素的CSS变换不起作用

试图将电池指示器定位在父svg中.svg 元素具有电池的路径和文本元素，显示了百分比在Chrome/Firefox打开时正确定位，但在Safari中分离. 24.2% codepen 解决方案而不是翻译文本，您可以将文本提供一些X和Y之类的属性.而不是缩放文本，您可能会更改字体大小. 对于路径，您可以选择这样的SVG转换: 在 body { width: 200px; } .bg { fill: #beeb1b; } .cap { fill: #aaa8

0 2023-04-13 编程技术问答社区 svg safari mobile-safari css-transforms

如何制作一个手拿牌的效果

因此，基本上我想拥有一张手持卡的透明图像，然后我想在曲线上显示卡片，例如当您手中握住10张卡片时(当然不是修复10张卡片).因此，它们应该放在弯曲的圆顶上. 我正在Angular工作，我知道我必须通过位置绝对和转换来实现这一目标:翻译rotate CSS，只是不知道如何我还使用Bootstrap，因此该卡的图像应在Col-12中，并在较小的屏幕上兼容. 我只有一个我从一个将元素放置在圆圈中的家伙中的代码部分 - bootstrap 3将元素对准圆我试图玩翻译和旋转，但无法正常工作解决方案这是我接近它的方式.这里有很多事情发生，但基本上是设置一个整体宽度以与一起工作使用预定义的卡和总角度津贴使用数学分配和倾斜卡片使用transform-origin: bottom center;给出效果 let cards = document.querySelector('.cards'); let w = cards.offsetWidth; l

10 2023-04-13 编程技术问答社区 javascript css twitter-bootstrap bootstrap-4 css-transforms

css动画怎么会改变z-index？

动画为什么会更改z索引? 如果您查看JSFIDDLE，您会看到红色图像在顶部，但是如果您评论动画，则蓝色图像在顶部.即使使用动画，我如何才能使蓝色图像始终处于顶部? html CSS .red { -webkit-animation-name: red; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; animation-name: red; animation-duration: 2s; animation-iteration-count: infinite; } .blue {

14 2023-04-13 编程技术问答社区 css css-animations css-transforms

旋转结合平移在CSS动画中是如何工作的？

我在codepen上看到了这个动画，我不知道为什么会以这种方式写下这种效果，但是我认为它将具有旋转360级旋转的效果左右我对这些密钥帧动画感到特别困惑 @keyframes move{ from { transform: rotate(360deg) translateX(1.125em) rotate(-360deg); } to { transform: rotate(-360deg) translateX(1.125em) rotate(360deg); } } 结果以下 https://i.stack.imgur.com/9ownw.gif 解决方案来自如果从和到转换具有相同数量的变换函数，每个变换函数对具有相同的名称，或者是相同原始的衍生物:插值每个变换函数对转换函数的插值中的描述.这计算值是最终的变换函数列表. 因此，浏览器将将第一个rotate从360deg更改为

8 2023-04-13 编程技术问答社区 css css-animations css-transforms

在css中只过渡一个变换？

你好，我只想过渡我的CSS转换，而别无其他.很难通过文本解释，因此请在下面查看我的代码: html: CSS: .circle-spin-wrapper { transition: all 1s ease; } .success li:hover .circle-spin-wrapper { transform:scale(1.25); position: relative; top: 95px; } 如您所见，我有一个DIV，当您悬停在它上时，它会缩

16 2023-04-13 编程技术问答社区 html css css-transitions css-transforms

Safari中的CSS透视/翻译Z问题

首次使用Perspective和Translatez合作，我遇到了Safari的问题. 我正在使用代码为我正在构建的站点创建一个简单的视差效果，该网站在Firefox和Chrome中正常工作，但在Safari中却没有. Safari似乎正在将填充物添加到应用透视属性的容器底部，而这些属性发生在另一个上述浏览器上. 我已经看了野生动物园的调试工具，以查看是否在任何地方都添加了任何填充物或边距，但事实并非如此.我将在下面附加代码，以演示所需的一些图像和不希望的行为. 提前欢呼. 所需的行为: 不希望的行为: @import url('https://fonts.googleapis.com/css?family=Staatliches&display=swap'); body, html { margin: 0; padding: 0; font-family: 'Staatliches', cursive; -webkit-m

8 2023-04-13 编程技术问答社区 html css safari css-transforms webkit-perspective

网格元素使用CSS展开动画

我有以下 setTimeout(function(){ var sections = document.querySelectorAll('section'), main = document.querySelector('.grid-container'), //section = sections[Math.floor(Math.random() * 3)]; section = sections[1]; section.classList.add('expand'); section.parentElement.classList.add('expand'); main.classList.add('expanding'); }, 2000); *{ box-sizing : border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;

26 2023-04-13 编程技术问答社区 css css-transforms

使用变换比例功能时出现白线

我正在使用border-image属性来创建带9片的样式组件.另外，我正在使用CSS transform: scale(x)属性根据屏幕尺寸来缩小/提高我的元素.我遇到的问题是，当刻度设置为1、2、3 ...但是，如果它的浮标设置为整个数字时，我的9板组件看起来不错很难修复它. 我尝试为border-image-slice以及scale设置不同的值.最初，当小数点之后的数字奇怪时，这是一个奇怪的想法. Button 预期的结果是，使用秤时，在边界上没有显示任何线/差距，否则我也愿意改变我们的规模规模.无论屏幕尺寸如何，我基本上都希望在桌

18 2023-04-13 编程技术问答社区 css reactjs css-transforms scaletransform border-image

试图创建这个css丝带。纠结于丝带的曲线问题

我尝试使用边框半径创建此CSS形状(功能区)，但我无法做到，我能够获得的曲线与图像中的DIV曲线完全不匹配. background: #008712; width: 89px; height: 22px; box-shadow: #d0dae0; background-color: #008712; border-bottom-left-radius: 70px; } 如果我正确地解决了解决问题的正确曲线，我希望避免使用SVG. 解决方案使用伪元素与某些偏斜转换: .box { width:200px; padding:8px; font-size:25px; color:#fff; position:relative; overflow:hidden; text-align:right; z-index:0; } .box:before { content:""; positi

20 2023-04-13 编程技术问答社区 html css css-transforms css-shapes

首页
<
1
2
3
4
5
6
7
8
>
尾页