safari浏览器兼容css3旋转同时位移处理

safari浏览器兼容css3旋转同时位移处理

项目某元素同时执行 位移+旋转时，谷歌浏览器等其他浏览器正常，safari浏览器不兼容（pc和苹果手机一样）

网络方案 （一）

（亲测 然并卵 ~~）

旋转元素的父级元素加入perspective

.father {
    
    
    transform: perspective(400px);
    // 为啥是400？ 因为animate.css中flipInX用到的就是400；我这里是引用了 animate.css 所以 根据它的设定我也设定了400
}

网络方案 （二）

初始声明时候，没带初始样式

初始：
.el{
    
    
	-webkit-transition: ease-out 2.5s;
    -ms-transition: ease-out 2.5s;
    -moz-transition: ease-out 2.5s;
    -o-transition: ease-out 2.5s;
    transition: ease-out 2.5s;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

旋转+位移：
.elTransform{
    
    
	-webkit-transform: translate(-50%, -50%) rotate(360deg);
	-moz-transform: translate(-50%, -50%) rotate(360deg);
	-o-transform: translate(-50%, -50%) rotate(360deg);
	-ms-transform: translate(-50%, -50%) rotate(360deg);
	transform: translate(-50%, -50%) rotate(360deg);
}

初始化样式不要缺失

初始：
.el{
    
    
	-webkit-transform: translate(-50%, -50%) rotate(0);
	-moz-transform: translate(-50%, -50%) rotate(0);
	-o-transform: translate(-50%, -50%) rotate(0);
	-ms-transform: translate(-50%, -50%) rotate(0);
	transform: translate(-50%, -50%) rotate(0);
}

但是：
如果你的项目还没解决的继续看

拆分 transform

经测试，单个位移、或者旋转 safari 浏览器执行正常

拆解：

• 位移使用定位代替
• transform只写rotate角度

修改后：

.el {
    
    
	width: 60%;
	heigt: 60%;
    position: absolute;
    top: 20%;
    left: 20%;
}

.elTransform {
    
    
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
}

如此，测试正常，只写一个。方法不是最优解，能解决问题。当你尝试各种解决方案无效，可以试试