为什么在父级上应用 CSS-Filter 会破坏子级定位?
所以我有这个标题屏幕“动画"；标题居中在全屏页面上，当您向下滚动时，它会变小并保持在页面顶部.这是一个具有预期行为的工作示例，我从中删除了所有不必要的代码以使其最小化: $(window).scroll( () => {“使用严格"；让 windowH = $(window).height();让 windowS = $(window).scrollTop();让 header = $("#
..
css-transforms相关内容
“transform3d"不适用于位置:固定的孩子
..
CSS 变换 - 保持悬停状态的价值
..
即使元素已经消失，悬停状态也会在转换期间保持
..
悬停时旋转或旋转图像
我想了解如何在悬停时制作旋转或旋转图像.我想知道如何在以下代码中使用 CSS 模拟该功能: img {边界半径:50%；} 解决方案 您可以使用 CSS3 过渡和 rotate() 来在悬停时旋转图像. 旋转图片: img {过渡:转换 .7s 缓进出；}图像:悬停{变换:旋转(360度)
..
仅使用一个 div 倾斜一侧的 div 边框
我使用以下 css 创建了一个倾斜的 div #outer-left{-ms 变换:倾斜(-30 度，0 度)；/* IE 9 */-webkit-transform:skew(-30deg,0deg);/* Chrome、Safari、Opera */变换:倾斜(-30度，0度)；背景:#333333;宽度:200px；z指数:20；边框底部:3px 实心#2E8DEF；填充:10 像素 30
..
CSS 80 的 TRON 网格
我想用 CSS 构建一个“80 年代 TRON 网格"效果，但在将它放到我想要的地方时遇到了一些问题. 像 这个. 我的要求: 将一侧淡化为透明 把它打包成一个漂亮的 .class 放在任何 上就可以了 我用 2 种不同的技术对此进行了 2 次尝试. 80 年代 Grid #1(伪选择器) https://codepen.io/oneezy/p
..
将 css3 旋转到 Chrome 中的 DIV 然后背景附件:修复创建错误
我的 background-attachment:fixed 工作正常.但是，当我在该 DIV 上定义 CSS3 rotate 并向下滚动时，background-attachment:fixed 停止工作. 检查这个 http://jsfiddle.net/P3jS4/ 现在我正在开发 chrome18. 当您删除旋转 css 时，背景附件:固定工作正常. http://
..
如何获得用css旋转转换的元素的位置
在应用 rotate 过滤器后，我在获取 div 的位置时遇到问题.我有一端的位置、它的高度和旋转的角度，但是在检查了这个过滤器在 MDN 上的实际作用之后 ("[cos(angle) sin(angle) -sin(angle) cos(angle)0 0]") 我还是不知道怎么破解. 例子: 我感兴趣的 div 是虚线.它当时的造型是: 左:80px；顶部:12px；高度:6
..
如何获取 CSS 3D 转换画布的画布相对鼠标位置?
只是为了好玩，我试图在 3D 转换的画布上绘画.我写了一些代码，它有点工作 const m4 = twgl.m4;[...document.querySelectorAll('canvas')].forEach((canvas) => {const ctx = canvas.getContext('2d');让计数 = 0;canvas.addEventListener('mousemo
..
Firefox 中带有边框图像的旋转 div 上的抗锯齿
我有一个旋转了 45 度的 div，上面有一个边框图像. 在 chrome 和 safari 中，它呈现得很好. 在 firefox 中，旋转 div 的边缘周围出现令人讨厌的抗锯齿线，在其边缘与其边框图像之间. 这是简单的 HTML:
这里是 CSS: .container {保证金:自动；宽度:400px；高度:400px；背
..
3D CSS 转换，Firefox 中的锯齿状边缘
类似于“css 变换，chrome 中的锯齿状边缘"，相同Firefox 在 3D 转换时发生，例如:http://jsfiddle.net/78d8K/5/(Firefox) 这一次，backface-visibility 没有帮助:( 有什么想法吗? 解决方案 编辑答案:(评论后) “解决方法"，添加一个透明的outline属性: outline: 1px 实心透明
..
div 向 2 个方向倾斜
是否可以在 CSS 中创建以下形状作为 DIV. 浏览器支持并不重要. 解决方案 你不能像这样直接倾斜一个元素，你需要使用两个元素(或生成的内容)并隐藏某些溢出来使底部边缘平坦: http://jsfiddle.net/6DQUY/1/ #skew {高度:240px；溢出:隐藏；}.skew {背景:#000；显示:内联块；高度:300px；宽度:500px；边距顶部:10
..
在 SVG 组上设置转换原点在 Firefox 中不起作用
我在让 transform-origin 在 Firefox 中工作时遇到问题(v.18+，其他版本未测试).Webkit 浏览器按预期工作.我试图将原点设置为组的中心，但到目前为止我尝试过的一切都没有奏效. 代码如下: #test {-webkit-transform-origin: 50% 50%;变换原点:中心中心；-webkit-animation: prop 2s 无限；动画
..
为什么转换顺序很重要?旋转/缩放不会给出与缩放/旋转相同的结果
在梳理完SVG规范和this 和 this，我仍在努力理解链式转换的工作原理. 精选相关报价 当您将 transform 属性应用于 SVG 元素时，该元素获取当前正在使用的用户坐标系的“副本". 还有: 当转换被链接时，需要注意的最重要的事情就是，就像 HTML 元素转换一样，每个变换应用于坐标系之后的坐标系由之前的转换进行转换. 还有: 例如，如果您要对元素
..
如何在 CSS 中应用多个变换?
使用 CSS，如何应用多个 transform? 示例:以下仅应用平移，不应用旋转. li:nth-child(2) {变换:旋转(15度)；变换:翻译(-20px，0px)；} 解决方案 你必须像这样把它们放在一行: li:nth-child(2) {变换:旋转(15 度)平移(-20 像素，0 像素)；} 当您有多个转换指令时，只会应用最后一个.就像任何其他 CSS 规则一样.
..
为什么在父级上应用 CSS 过滤器会破坏子级定位?
所以我有这个标题屏幕“动画"标题以全屏页面为中心，当您向下滚动时，它会变小并保持在页面顶部.这是一个具有预期行为的工作示例，我从中删除了所有不必要的代码以使其最小化: $(window).scroll(() => {“严格使用"；让 windowH = $(window).height();让 windowS = $(window).scrollTop();让 header = $("#he
..
CSS 转换不适用于内联元素
我想在单词 WEBLOG 中镜像字母 E 所以我使用了 CSS 转换属性但是如果我将文本包裹在一个跨度内它不起作用但它起作用如果我使用 display: inline-block; 或 display: block; 所以转换不适用于内联元素? 示例 1(无法转换) WEBLOG h1跨度{变换:旋转(7度)；-ms-transform:旋转(7度)；/* IE 9 */-moz
..
“transform3d"不适用于位置:固定子项
我有一种情况，在正常的 CSS 环境中，固定的 div 将准确定位在指定的位置(top:0px、left:0px). 如果我有一个具有 translate3d 转换的父级，这似乎不受尊重.我没有看到什么吗?我尝试过其他 webkit-transform，如 style 和 transform origin 选项，但没有运气. 我附上了一个 JSFiddle 的例子，我希望黄色框在页面的
..
为棋盘游戏响应地映射自定义形状的 HTML 元素的好方法
我的问题是我还没有弄清楚如何以响应方式对齐空间.我试过使用 vw/vh's 和 %s，但两者都破坏了不同视图大小的一致性.任何人都可以推荐一种直接的方法来锁定这个板吗? 我不想使用 50 多个空间的 cpu 消耗的多个画布 bc，也不想使用图像映射，因为它没有响应. 大家好， 我正在尝试通过 angular 1.x 将棋盘游戏移植到 HTML 中.我有一个包含每个板空间的对象，并
..