水果手机 Safari transform rotateY 不兼容问题

简介: 移动端写css3 时 发现在safari 上  一个元素使用了  transform:rotateY(19deg);   显示有问题。

移动端写css3 时 发现在safari 上  一个元素使用了  transform:rotateY(19deg);   显示有问题。

.class{    transform: scale(0.85) rotateY(10deg);
    -moz-transform: scale(0.85) rotateY(10deg);
    -o-transform: scale(0.85) rotateY(10deg);
    -webkit-transform: scale(0.85) rotateY(10deg);
}
这样 class 元素就看不到了,



然后挨着试在class 元素上添加 

transform-style: perspective-3d, 或者visibility:visible , perspective:1000, 也都无济于事,

transform-style 两个值 flat 即默认 2d,perspective-3d 即 所有子元素在3d空间中展示,


perspective : w3c 上看了 一段   试着 在父类元素上添加 perspective 小图标果断显示出来了


.faterclass{
    transform: perspective(1000);
    -moz-transform: perspective(1000);
    -o-transform: perspective(1000);
    -webkit-transform: perspective(1000);
}

绕Y轴旋转 效果。。。。。



再 说下 如果  元素使用动画 用了  transfrom  属性 

.class {
  animation: dh 2.5s linear infinite alternate;
  -webkit-animation: dh 2.5s linear infinite alternate;
}

@keyframes dh {
  form {
    transform: scale(0.7) rotateY(150deg);
    -moz-transform: scale(0.7) rotateY(150deg);
    -o-transform: scale(0.7) rotateY(150deg);
    -webkit-transform: scale(0.7) rotateY(150deg);
  }
  to {
    transform: scale(0.95) rotateY(360deg);
    -moz-transform: scale(0.95) rotateY(360deg);
    -o-transform: scale(0.95) rotateY(360deg);
    -webkit-transform: scale(0.95) rotateY(360deg);
  }
}
这样 手机上是不会显示动画效果的

需要在.class 里加上初始的 效果


.class {
  -moz-transform: scale(0.85) rotateY(10deg);
  -o-transform: scale(0.85) rotateY(10deg);
  -webkit-transform: scale(0.85) rotateY(10deg);
  animation: dh 2.5s linear infinite alternate;
  -webkit-animation: dh 2.5s linear infinite alternate;
}








相关文章
|
Web App开发 JavaScript iOS开发
iOS Safari 浏览器 100vh 带有滚动条解决方案
iOS Safari 浏览器 100vh 带有滚动条解决方案
694 0
|
Web App开发 API iOS开发
WebKit 代码“曝露”苹果 Safari 新功能:iOS 15/16 或添自定义暗黑模式、弹窗等设置
WebKit 代码“曝露”苹果 Safari 新功能:iOS 15/16 或添自定义暗黑模式、弹窗等设置
276 0
WebKit 代码“曝露”苹果 Safari 新功能:iOS 15/16 或添自定义暗黑模式、弹窗等设置
|
传感器 编解码 生物认证
三星Note 8发布!外观惊艳到苹果妒忌!
23号晚上11点,小伙伴们有木有守在电脑前观看三星Note 8的发布会?
272 0
三星Note 8发布!外观惊艳到苹果妒忌!
|
传感器
苹果考虑在 Apple Watch 上安装摄像头,可实现自拍功能
这一专利的发现并不表明苹果即将发布应用这一设计的新产品。
1019 0
三星又有折叠手机新专利,然而Galaxy Fold的屏幕bug还没有解决
在折叠产品这一块,三星一边进击一边收拾烂摊子。
489 0
|
移动开发 安全 JavaScript
H5网页适配 iPhoneX,就是这么简单
  iPhoneX 取消了物理按键,改成底部小黑条,这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理,所以我们只需要关注底部与小黑条的适配问题即可(即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素)。
3105 0
|
Web App开发 JavaScript iOS开发
[完美]原生JS获取浏览器版本判断--支持Edge,IE,Chrome,Firefox,Opera,Safari,以及各种使用Chrome和IE混合内核的浏览器
原文:[完美]原生JS获取浏览器版本判断--支持Edge,IE,Chrome,Firefox,Opera,Safari,以及各种使用Chrome和IE混合内核的浏览器 截至自2017-08-11,支持现世已出的几乎所有PC端浏览器版本判断。
5139 0