css rotate3d兼容

CSS的rotate功能可以让我们在网页中实现3D旋转的效果，不过在使用的时候需要注意浏览器兼容性以及不同的操作系统的表现效果。

.Box {
  transform: rotate3d(1,1,45deg);
  /* Safari */
  -webkit-transform: rotate3d(1,45deg);
  /* Firefox */
  -moz-transform: rotate3d(1,45deg);
}

在不同的浏览器中，写法也有所不同。例如在IE中，需要使用DX Filters进行兼容。

.Box {
  /* IE */
  filter: progid:DXImageTransform.Microsoft.Matrix(
      M11=0.707,M12=-0.707,M21=0.707,M22=0.707,sizingMethod='auto expand');
}

需要注意的是，在旋转时要注意元素的定位，否则可能会出现位置偏差或者挤压现象。

.Box {
  position: relative;
  /*注意这里使用rem作为单位是为了让布局更加自适应*/
  left: 5rem;
  top: 5rem;
  transform: rotate3d(1,45deg);
}

以上是关于CSS的rotate3d兼容性问题的一些总结，希望对大家有所帮助。