使 CSS 过渡效果适用于所有浏览器

2024-04-20

我目前有以下 CSS,它适用于 Google Chrome (Webkit),但不适用于任何其他浏览器。

使其与一切兼容的最佳方法是什么?

正如你所看到的,它使用的是 webkit,但我不确定 moz 的等价物是什么。

非常感谢

.card{
    margin-top: -50px;
}

.card {
    width: 286px; height: 224px;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: 0.5s;
    -moz-transform-style: preserve-3d;
    -moz-transition: 0.5s;
}
    .container:hover .card {
        -webkit-transform: rotateY(180deg); 
        -moz-transform: rotateY(180deg);                

    }

.face {
    position: absolute;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
}


.megatron {
    float: left; top: 30px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
}
    .megatron .front {

    }
    .megatron .back {
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);

    }
        .megatron .back h2 {
            background: url(megatron-title.png); text-indent: -9999px; 
        }
        .megatron img {
            float: right;
        }

您的基本跨浏览器 CSS3 转换声明:

-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;

这是我最喜欢的工具之一,可以帮助加快这一过程:http://css3generator.com/ http://css3generator.com/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使 CSS 过渡效果适用于所有浏览器 的相关文章

  • 如何让CSS选择以字符串开头的ID(不是Javascript)?

    如果 HTML 中有这样的元素 id product42 id product43 如何匹配所有以 product 开头的 id 我已经看到了完全使用 javascript 执行此操作的答案 但是如何仅使用 CSS 执行此操作 id pro
  • 重新创建 CSS3 过渡三次贝塞尔曲线

    在 CSS3 过渡中 您可以将计时函数指定为 cubic bezier 0 25 0 3 0 8 1 0 在该字符串中 您仅指定曲线上点 P1 和 P2 的 XY 因为 P0 和 P3 始终分别为 0 0 0 0 和 1 0 1 0 根据苹
  • Bootstrap Affix Nav 导致下面的 Div 向上跳转

    我使用 Bootstrap 的 Affix 函数创建了一个 JSFiddle 以便在向下滚动并且标题移出视图时使导航保持在屏幕顶部 我遇到的问题是 当使用纯 HTML 时 导航下方的文本会过早地跳起来并隐藏在导航后面 查看有问题的代码her
  • 使用内联样式有哪些风险?

    A 内容安全政策 https developer mozilla org en US docs Web HTTP CSP with a default src or style src指令将阻止内联样式应用于
  • 使用 jQuery 选择具有数据属性的元素为其父元素分配一个 null ID

    这确实很奇怪 如果我使用 jQuery find 在滚动事件期间查找具有数据属性的子元素 然后滚动页面将重复添加和删除 IDparents这些元素 这很难描述 但这里有一个可重现的测试用例 http jsfiddle net 8fouvx9
  • 闪亮的应用程序包:css 和所有 www/ 目录内容

    我正在尝试将 Shiny 应用程序转换为 R 包 但我在处理有关 www 目录以及 松散 文件的所有问题时遇到了问题 我闪亮的应用程序运行得很好 但是当我尝试 打包它 时 它不起作用 我闪亮的应用程序目录 my shiny app R ut
  • 在按钮之间添加空间?

    嗨 我这里有一个代码 除了一件事之外 一切都很完美 代码中每个按钮之间没有空格 我尝试过 margin 但不幸的是它是一个无序列表 所以我有点困惑 我将添加或替换什么以在两个按钮之间留出空间 帮助
  • 宽度:适合内容;在 Chrome 上工作,但在资源管理器上不工作

    我构建了一个应用程序 所有内容都在 Chrome 中完美显示 但如果我在 Windows 资源管理器中打开该应用程序 容器会比应有的小 我在用着width fit content 这是只适用于 Chrome 的东西吗 我怎样才能使其适用于所
  • 使用 CSS 覆盖透明 div 中的不透明文本

    我试图使透明 div 内的文本没有不透明度 也就是全黑 div style background 3cc p style background 000 This text should be all black p div 只用 CSS 就
  • 不使用控件时,视频元素在 Chrome 中消失

    So I think这是一个浏览器错误 它出现在一个更复杂的设计 网站中 但我已经进行了很好的尝试 简化了我的代码和设计等 并发现了以下内容 嵌入时
  • 在 Bootstrap 中使用 CakePHP 时如何修改包装器 div 错误类

    我在用着Bootstrap 3 0RC1 with CakePHP 2 3 6 尝试利用那些漂亮的课程 例如has error and has warning for 验证状态 http getbootstrap com css forms
  • 应用旋转时,HTML5 canvas Clip() 在 Chrome 中不起作用

    我试图在画布上使用剪辑区域 一旦坐标系旋转任何非零值 它就会停止工作 window onload function var canvas document getElementById mainCanvas var ctx canvas g
  • 固定宽度可变高度网格CSS

    我们如何在网格布局中实现固定宽度和可变高度 就像www pinterest com http www pinterest com主页布局 我认为他们正在使用 Javascript 只是想知道是否还有其他方法 只需使用float left不管
  • 动态表单标签宽度的 CSS

    我目前正在重构我们的表单控制器之一 以便我们可以将其用于面向公众的网站 目前它正在为表单生成表格布局 但我正在尝试使用 CSS 表单来完成它 我正在尝试重现看起来像这样的东西http www stylephreak com uploads
  • Chrome 的独立代理设置的解决方法[关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我做了一个搜索并且也在这个forum https stackoverflow com questions 19118181 why doe
  • 如何更改 Bootstrap 3 div 列顺序

    正在做我的第一个响应式设计 在 Bootstrap 3 中可能会出现类似的情况 在 lg 上更改此设置 a b c sm 上的这个 a c b 您可以使用两个 div 一个用于第一类型的布置 另一个用于第二类型的布置 第一个仅在 lg 中显
  • 使用 Firefox 绕过弹出窗口下载文件:Selenium Python

    我正在使用 selenium 和 python 来从中下载某些文件web page http www oceanenergyireland com testfacility corkharbour observations 我之前一直使用设
  • 覆盖并重置 CSS 样式:auto 或 none 不起作用

    我想覆盖为所有表定义的以下 CSS 样式 table font size 12px width 100 min width 400px display inline table 我有一个特定的表 其类名为 other 最后的餐桌装饰应该是这
  • 显示覆盖以覆盖整个页面

    我有一个正在加载的网络应用程序iframe 我需要显示一个覆盖 div 来覆盖整个页面 问题是叠加层当前仅显示在iframe区域而不覆盖整个页面 我们的应用程序 子应用程序 是加载的一组应用程序的一部分iframe 你可以做这样的事情 di
  • HTML 默认图像大小

    我在我的代码上显示 3 张图片 图片具有不同的尺寸 宽度和高度 div class row div class col lg 12 h2 class page header Gallery h2 div div class col md 4

随机推荐

  • 如何使用 Spring 在 Postgresql 中存储 java.util.ArrayList

    我正在尝试批量插入一组 Bean bean 的属性之一是 ArrayList 批量更新失败 异常 Can t infer the SQL type to use for an instance of java util ArrayList
  • String.Split 不会删除分割文本,仅删除第一个字母

    这里发生了什么 issue CallAction具有以下值 Blah blah WebSite 9 20 2017 Containers remaining changed to 0 对其进行拆分 如下所示 issue CallAction
  • 已弃用对 Google Maps Platform 的无钥匙访问

    有时 当我尝试使用 Google MAPS API KEY 获取 URL 来绘制 折线 时 我的日志中会出现错误 error message Google Maps Platform 的无密钥访问已被弃用 请在所有 API 调用中使用 AP
  • 将 Webpart 添加到页面后,“列表工具”选项卡不再可用

    在 SharePoint 2010 中 我已在列表上方添加了我的 Web 部件 标准列表或文档库列表 这并不重要 此后 列表工具 选项卡不可见 经过一番挖掘后 我发现即使我添加标准 SharePoint WebPart 之一 该问题仍然存在
  • ReactJS Bootstrap 导航栏和路由不能一起工作

    我正在尝试使用 ReactJS 创建一个简单的 Web 应用程序 并且我想使用Navbar由 React Bootstrap 提供 我创建了一个Navigation js包含类的文件Navigation来分离Navbar以及来自的路由App
  • ASP.NET MVC 4 - 从控制器添加捆绑包?

    我的网站上有一些页面使用某些 CSS 和 JS 资源 但它们是唯一使用该 css 或 js 文件的页面 所以我不想在每个页面中都包含该 CSS 和 JS 引用 我认为我可以在控制器中创建一个捆绑包并将其添加到已经注册的捆绑包中 然后将其包含
  • 正则表达式匹配 golang 中不以 www 开头的字符串

    我有以下正则表达式 http www 预期行为 http example com Match http www example com Does not match 看起来像golang不支持负向前瞻 我怎样才能重写这个正则表达式来工作go
  • 正确使用 Servlet 中的 Stateful Bean

    目前 我们有一个注入到 Servlet 中的 Stateful bean 问题是有时我们会得到一个Caused by javax ejb ConcurrentAccessException SessionBean is executing
  • Android 位图调整大小

    调整位图大小的最佳方法是什么 Using options inSampleSize 2 Bitmap bitmap BitmapFactory decodeResource getResources R drawable mandy moo
  • .NET Remoting,为什么列表不能远程处理?

    我在用着RemotingServices Marshal and Activator GetObject在同一台计算机上的两个简单程序之间建立远程通道 public class IpcInterface MarshalByRefObject
  • Spring属性解密

    我们混合了一些尚未迁移到 spring boot 或 spring cloud 的遗留 Spring 应用程序以及 Spring Boot 应用程序 我正在创建一个 Spring 组件 如果属性值已加密且具有前缀 则该组件将在加载环境时自动
  • 如何通过继承向 Pyspark Dataframe 类添加自定义方法

    我正在尝试继承 DataFrame 类并添加其他自定义方法 如下所示 以便我可以流畅地链接并确保所有方法引用相同的数据帧 我收到异常 因为列不可迭代 from pyspark sql dataframe import DataFrame c
  • Crystal Report SP26 SetDataSource() 方法在 Visual Studio 2019 中的客户端计算机中失败

    我正在使用 Visual Studio 2019 和 Crystal Report Service Pack 26 我的代码将数据读取到 ADO NET 数据集中 并将这些数据设置为我的报告的数据源 Visual Basic Net 中类似
  • 如何使用@Configuration排除spring配置文件对其他项目的依赖

    我有一个项目 A In Maven 它依赖于项目 B In Maven 现在项目 B 得到了一些 spring Configuration db 配置 文件 这些文件在我构建和部署项目 A 时启动 但由于我的项目 A 中没有一些配置属性 它
  • AngularJS 如何防止重复的http请求?

    过去的一天我一直在为一些奇怪的情况而苦苦挣扎 发生的情况是 对于远程服务器上的 API 的 http 请求 偶尔会发送重复的请求 任何人都可以提供有关如何避免这些重复请求的帮助吗 这是我在工厂中使用的函数的示例 factory getAll
  • Rails 方式编写复杂查询

    我有这样的疑问 SELECT f id Concat f name REPLACE f parent names AS FullName u name AS Unit u id AS UnitId u position AS UnitPos
  • 如何防止从 char 数组到 bool 的隐式转换

    struct Foo void setBar bool bar bar bar bool bar int main Foo f f setBar true 由于类型转换 上面的代码编译成功 即使传递了一个 char 数组 其中bool是期待
  • 简化 if (x) Some(y) else None?

    这种常见模式感觉有点冗长 if condition Some result else None 我正在考虑使用一个函数来简化 def on A cond Boolean f gt A if cond Some f else None 这将顶
  • 后台工作者中止

    我最近尝试使用后台工作程序而不是 经典 线程 我意识到至少对我来说 它造成的问题多于解决方案 我有一个后台工作人员运行同步读取 在本例中是从串行端口 并在 1 行代码中被阻塞大约 30 秒 然后取消挂起不是解决方案 我看到 如果应用程序此时
  • 使 CSS 过渡效果适用于所有浏览器

    我目前有以下 CSS 它适用于 Google Chrome Webkit 但不适用于任何其他浏览器 使其与一切兼容的最佳方法是什么 正如你所看到的 它使用的是 webkit 但我不确定 moz 的等价物是什么 非常感谢 card margi