CSS转换在Mozilla浏览器中不起作用
我正在尝试使用输入/标签的组合来创建3D动画滑块，以触发单击时的过渡，但是在Mozilla firefox中不起作用. 它在Chrome中运行正常，但是在Mozilla中，当我单击时，卡之间没有过渡 https://codepen.io/panfilov/pen/GogJVy * {边距:0;填充:0;}身体 {内边距:20px;背景:#eee;用户选择:无；}[type =
..
css-transforms相关内容
如何制作具有拉伸效果的3D元素?
我创建了一个等距的10x10字段， 转换:rotateX(60deg)rotateY(0deg)rotateZ(-45deg) 是否有任何可修改div"z-heigth"的属性，允许我为每个内部单元格赋予不同的“深度"，从而创建一列? 单元格和表格的当前代码: #table {宽度:600像素；高度:600像素；背景颜色:白色；显示:flex;flex-direction:行；
..
将SVG汉堡包图标旋转为X?
我已经使用HTML中的纯SVG 代码设计了 3栏图标.我正在使用CSS3转换来旋转顶部&底部的条形成X形.问题是它们绕自己的中心旋转，但是我需要它们绕图标的中心旋转.为了解决这个问题，我已经调整了它们的X/Y坐标. 这会导致Internet Explorer，Firefox和&苹果浏览器.Chrome似乎还不错，但显然我想以“正确"的方式编写代码，使其可以在所有浏览器中使用. 这是我的
..
SVG文本元素上的CSS转换在Safari中不起作用
尝试将电池指示器放置在父SVG内.SVG 元素具有用于电池的路径和用于显示电池指示器的文本元素.百分比.它具有一些CSS转换和文本属性.在chrome/firefox中打开时，文本位置正确，但在野生动物园中却不正确.
..
Firefox中的固定位置背景图片不适用于转换后的元素.这是FF错误吗?
目标:在适用于Firefox的转换后的元素中创建固定的背景位置. 我已经尝试过此页面上的所有解决方案(以及其他一些解决方案)，但没有一个起作用:固定附件背景图像在chrome中闪烁/消失加上CSS转换 我尝试使用的是静态位置，背面可见性设置，z-index设置以及其他背景附件. 演示: https://jsfiddle.net/96u9xqbn/6/ .fixed1 {
..
同时应用两个不同的CSS转换
我正在研究一个脚本，该脚本基于光标位置使用向左和向右变换来调整图像. 还有一些CSS可以将鼠标悬停在图片上. //JavaScript源代码var catchX = 0，catchY = 0，x = 0，y = 0，烧= 1/28;函数imageWatch(){x + =(catchX-x)*燃烧；翻译='翻译('+ x +'像素，'+ y +'像素)';$('.image-area im
..
如何将转换原点与SVG结合使用?
我正在尝试从其中心旋转 SVG路径，但是它不起作用 a {宽度:40px；高度:40px；宽度:40px；字体大小:1.5rem；填充:1px；溢出:隐藏；边框:1px纯黑色；}a:悬停路径{-webkit-transform:旋转(360deg);-moz-transform:旋转(360deg)；-ms-transform:旋转(360deg);-o-transform:旋转(360d
..
旋转结合平移如何在CSS动画中起作用?
我在codepen上看到了这个动画，我不知道为什么用这种方式编写动画来产生这种效果，但是我认为它将具有顺时针旋转360deg，逆时针旋转360deg的效果，而不是上下弹跳或左右 我特别对这些关键帧动画感到困惑 @关键帧移动{从 {变换:rotate(360deg)translateX(1.125em)rotate(-360deg);}至 {变换:rotate(-360deg)transl
..
CSS动画在IE/Edge中不起作用
这东西在IE/Edge中如何工作?我不明白为什么没有. 当我向元素添加类时，其边框将变为虚线并开始旋转. $(“#btn").click(function(){$(“.bg")[0] .classList.toggle("rotate");}) @keyframes PDFgenerate {至 {-moz-transform:旋转(360deg)；-ms-transform:
..
使用变换比例功能时出现白线
我正在使用 border-image 属性创建具有9切片的样式化组件.我也使用css transform:scale(x)属性根据屏幕尺寸缩小/放大我的元素.我遇到的问题是，当将scale设置为1、2、3等整数时，我的9切片组件看起来很好，但是如果它是浮点型，则边框显示9切片线/间隙，而我很难修复它. 我尝试为 border-image-slice 和 scale 设置不同的值.最初认为，当
..
尝试创建此CSS功能区.在色带曲线上挣扎
..
CSS带背景的旋转文本显示了一些背景问题
我正在使用CSS稍微旋转文本.文本在白色背景上是黑色的，但由于背景的旋转，因此有一些透明的小线穿过它.此图像将更清楚地显示它: body {背景:红色；}.featured-grid-b .item-heading {/*白色背景上的黑色文字*/box-shadow:0 0 0 5px #fff;填充:0;背景:#fff;行高:2！important;显示:内联；颜色:#000;文本阴影:
..
将图片原始尺寸保持在较小的div内
我有一个600x400px的图像，并希望在尺寸为240x200px的较小div内，但是图像会缩小或变形.我想将原始尺寸的图片放在较小的div中，这样会隐藏一些图片 我编写了此CSS规则，以适用于不同的图像尺寸. .theBox {向左飘浮;溢出:隐藏；宽度:240像素；高度:200px；}.theBox img {显示:块；高度:100％！重要;宽度:100％！重要;} 解决方案
..
如何使用Flexbox布局垂直居中旋转文本?
如何使用flexbox布局垂直居中旋转文本?我想要看起来像这样的东西:
..
我可以使用CSS扭曲边框，使边框看起来像草绘的吗?
我有一个有边框的框( div )，我想使它们看起来像一个草图，即边框的边界不是直线，而是有些扭曲，就像手工绘制一样. 插图: 可以使用CSS转换或类似方法完成此操作吗? 解决方案 此文章位于手绘边框提供了一个很好的示例，该示例通过使用大的椭圆形圆角(通过
..
如何进行CSS转换会影响其他元素的流程
我正在将CSS过渡与 transform 属性一起使用，以在添加和删除元素时缩小元素. 但是，与此有关的一个问题是，此属性不会影响其他元素的流动，因此看起来好像要删除的元素缩小了，然后其余元素突然跳了起来. 如果我要对height属性进行动画处理，而不是使用变换，那会很好，但是在实际使用中，我使用的是可变高度的元素，所以我不知道可以在哪些高度之间进行动画处理. 编辑:人们建议对
..
如果父元素具有其自身的转换，为什么忽略CSS translateZ?
任何人都可以解释这种行为吗? 我有三个嵌套元素:一个容器 div ，一个子容器 div 和一个"shape/image" div .标记如下:
..
CSS动画如何更改Z-index?
为什么动画会更改z-index? 如果您查看jsfiddle，您会看到红色图像位于顶部，但是如果您注释掉动画，则蓝色图像位于顶部.即使使用动画，如何使蓝色图像始终位于最上方? jsfiddle HTML
..
为什么在更新某些样式时透视图不能给出相同的结果?
我有两个具有3d转换(rotationY)的框.每个都有几乎相同的值，一个角度看起来不错，另一个角度有点错误，但仍然有一些正确的角度. 顶部的第一个框没有突出，但是它具有透视图.另外，容器的3度角大了200％ 第二个框具有精美的3d效果. 我在这里举例说明了我要解释的内容. $(“.eye").on('click'，function(){$('.man').toggleC
..
用不同的计时功能转换x和y?
当前，我正在使用以下代码以相同的速度翻译x和y: -webkit-transition:全部180ms缓解； 我想平移X轴的速度比Y轴慢.是否可以指定类似于以下内容的东西: -webkit-transition:translateX 180ms缓解；-webkit-transition:translateY 50ms缓解； 提前谢谢！ 解决方案 不幸的是，您不能对 tran
..