css-transforms 相关问题

CSS变换允许使用CSS样式化的元素在二维或三维空间中进行变换

CSS 网格每行第一项（选择每行第一项）

我有一个使用网格模板列自动填充的网格。即使网格是自动填充的，有没有办法选择每行的每个第一个元素。也就是说，我有以下 CSS：...

jquery css css-transitions css-grid css-transforms

回答 1 投票 0

在 Firefox 与 Chrome 中使用 css 变换旋转的性能问题

我正在尝试查明原因，如果可能的话，找到解决方案或解决方法来解决我在 Firefox 中更新大约 200 个 span 元素的转换时遇到的性能问题。在 Chrome 中，我...

javascript css performance firefox css-transforms

回答 2 投票 0

CSS transform-origin 无法按预期在 Safari 中工作

我正在尝试使用 transform-origin: center 围绕其中心旋转（旋转）svg。它在 Chrome 和 FireFox 以及 Safari 中以 100% 缩放完美运行。当我试图缩小或放大 ...

css ios safari css-animations css-transforms

回答 0 投票 0

为什么拖动图片元素不能缩放

在下面的代码中，应用了背景样式，但缩放变换在叠加层上不起作用。但是它被添加到叠加层中，因为它旁边的 DOM 项目被缩小了，但是 o...

html css css-transforms

回答 0 投票 0

变换：缩放 svg 路径和居中

几个小时以来，我一直在尝试为 svg 世界地图制作动画。我就此主题发表了一些文章和主题，但没有任何效果。我有一张 SVG 世界地图，其中一条路径叫做澳大利亚。几个小时以来，我一直在尝试为 svg 世界地图制作动画。我就这个话题发表了几个文章和主题，但没有任何效果。我有一张 SVG 世界地图，其中一条路径叫做澳大利亚。 <svg version="1.1" id="World" viewBox="0 0 1920 1080"> <a href="/Australia" title="Australia" className="nav-link"> <path id="Australia" d="M1530.9,867l-66.4,5.4 c-4.3,0.3-7.9-3.2-7.5-7.5l4.7-60.2c0.3-4,2.6-7.7,6.1-9.7l75.4-43.8c3.2-1.9,7.3-1.4,10,1.2l14.6,14.1c2.7,2.6,6.8,3.1,10.1,1.3 l12-6.8c4.7-2.7,10.6-1,13.2,3.7l32.5,58.6c2.2,4,2.4,8.9,0.5,13l-24.8,53.2c-1.6,3.5-4.9,6-8.7,6.7l-36.6,6.7 c-5.2,1-10.4-1.7-12.7-6.5l-11-22.8C1540.2,869.2,1535.7,866.6,1530.9,867z" /> </a> </svg> 我正在尝试使用 css 为路径设置动画，使其居中并放大到 6. 问题是 SVG 根据原点位置而不是当前位置进行缩放，我试图通过缩放来解决这种情况，然后分几步转换到中心。它有点工作，但动画不流畅，因为不是最佳居中，所以它以 zic-zac 运动移动，而不是流畅地放大并移动到中心。 #Australia.clicked { animation: Australia-click-animation 2s ease-out forwards; } @keyframes Australia-click-animation { 0% { transform: scale(1); stroke-width: 15; } 20% { transform: scale(2) translateX(-56%) translateY(-52.5%); stroke-width: 7; } 40% { transform: scale(3) translateX(-65%) translateY(-60%); stroke-width: 7; } 60% { transform: scale(4) translateX(-67.5%) translateY(-64%); stroke-width: 7; } 80% { transform: scale(5) translateX(-71%) translateY(-66.5%); stroke-width: 7; } 100% { transform: scale(6) translateX(-72%) translateY(-68.5%); stroke-width: 7; } } 我尝试了不同的方法，首先我一步完成，但这会将路径从视图框移到右下角，然后再居中。 @keyframes Australia-click-animation { 0% { transform: scale(1); stroke-width: 15; } 100% { transform: scale(6) translateX(-72%) translateY(-68.5%); stroke-width: 7; } } 在 Illustrator 或您用来创建 svg 的任何东西中找到大陆的中间坐标，并将该值作为 translation-origin 值作为内联样式放入您的 svg 路径。对于澳大利亚来说是： <path style="transform-origin: 1547px 826px" id="Australia" 从 css 动画中删除所有翻译值并仅使用比例值。

css svg css-transforms web-frontend

回答 1 投票 0

Flipbox 背面按钮在垂直翻转时无法在 Safari Mac OS 上点击

只有翻转框设置为垂直翻转，我无法单击背面的链接/按钮来导航/取消翻转。如果翻转框背面的水平链接/按钮是可点击的。是一个

html css css-grid css-transforms

回答 1 投票 0

文本分割与动画一起居中

原则上，我想做下面概述的事情。该页面有两种可能的状态。在第一个中，两个文本（它们的长度可能不同）作为标题居中。对于第二个状态，

html css vue.js css-position css-transforms

回答 0 投票 0

backface-visibility: hidden 隐藏整个页面

我正在学习如何使用 html 制作动画书的教程。一切都很好，直到我到达翻转纸张的部分。出于某种原因，“back 1”出现在我的屏幕上......