CSS rotate3d()与translate3d()在Firefox、IE11失效，Chrome正常

我来帮你搞定这个跨浏览器的3D变换兼容问题！这个问题其实是不同浏览器对rotate3d()的参数处理以及复合变换执行顺序的解析差异导致的，我给你拆解下原因和修复方案：

问题根源 #

• Chrome和Opera会自动把rotate3d()里的非单位向量（比如你用的-10, -10, 1）归一化，转换成标准单位向量后再执行旋转；但Firefox和IE11不会做这个自动处理，直接用原始向量计算就会导致旋转效果异常，最后只显示了平移动作。
• 另外，CSS的复合变换是从右往左依次执行的，你原来的写法是先执行translate3d再执行rotate3d，这个顺序也会让不同浏览器的视觉表现出现偏差。

修复方案 #

1. 把rotate3d的向量归一化为单位向量：rotate3d(x,y,z,angle)里的x/y/z需要是单位向量（三个参数的平方和开根号等于1），这样所有浏览器都会按相同基准计算旋转。
   你原来的向量(-10,-10,1)长度是√(10²+10²+1²)=√201≈14.177，归一化后得到(-10/√201, -10/√201, 1/√201)，大约是(-0.705, -0.705, 0.0705)。
2. 调整变换顺序：把translate3d放在rotate3d前面，让旋转先基于元素原位置执行，再做平移，这样各个浏览器的表现就能统一了。

修正后的代码 #

CSS部分 #

.box {
 width: 100px;
 height: 50px;
 float: left;
 background: #007bff;
 text-align: center;
 color: white;
 font-size: 20px;
 padding-top: 35px;
 position: relative;
 transition: all 0.5s ease; /* 统一过渡属性的规范写法 */
 transform-style: preserve-3d; /* 开启3D空间，增强老浏览器兼容性 */
 perspective: 1000px; /* 添加透视，让3D效果更自然 */
}
.box:hover {
 /* 先旋转再平移，使用归一化后的单位向量 */
 transform: translate3d(100px, 0px, 0px) rotate3d(-0.705, -0.705, 0.0705, 360deg);
 transition: all 0.5s ease;
}

HTML部分（保持不变） #

<div class="box"> Hi! </div>

额外说明 #

• 添加transform-style: preserve-3d和perspective能让3D变换在IE11这类老浏览器里表现更稳定。
• 把transition: 0.5s改成transition: all 0.5s ease是更规范的写法，明确了过渡的属性和缓动函数。

内容的提问来源于stack exchange，提问作者jake