vscode中平面转换浏览器无法显示

Question

transform中，rotate和skew在浏览器(谷歌）中都无法显示效果😭

Answer 1

让阿豪来帮你解答，本回答参考chatgpt3.5编写提供，如果还有疑问可以评论或留言

首先，需要确认你的代码是否正确，是否有误导之处，建议在其他浏览器中测试，确认是否是浏览器兼容性的问题。 如果确认是浏览器兼容性问题，可以尝试以下方法：

1. 使用浏览器厂商前缀：不同厂商的浏览器对css3的支持是不同的，可以在属性前加上浏览器厂商前缀试试。常见的前缀有：-webkit- 、-moz- 、-o- 、-ms- 。例如：

transform: rotate(30deg);
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-moz-transform: rotate(30deg); /* Firefox */
-ms-transform: rotate(30deg); /* Internet Explorer */
-o-transform: rotate(30deg); /* Opera */

1. 使用 JavaScript 实现：如果浏览器不支持 CSS3 的 transform 属性，我们可以尝试使用 JavaScript 实现相应的功能。例如：

var element = document.getElementById("myimage");
element.style.transform = "rotate(30deg)";

1. 使用 SVG 实现：如果要在图像中实现旋转或倾斜效果，可以尝试使用 SVG（可缩放矢量图形）来实现。例如：

<svg width="100" height="100">
  <image href="image.jpg" x="0" y="0" width="100" height="100" transform="rotate(30)"/>
</svg>

案例：通过JS实现正方形的旋转效果，兼容多种浏览器。 CSS代码：

.square{
  width:100px;
  height:100px;
  background:red;
  position:relative;
  top:50px;
  left:50px;
  transition:0.5s;
  transform-origin: 50% 50%; /*设置旋转的中心点*/
}

JS代码：

var angle = 0;
setInterval(function(){
  angle+=5;
  //兼容不同浏览器
  var transform = "rotate("+angle+"deg)";
  document.querySelector(".square").style.transform = transform;
  document.querySelector(".square").style.webkitTransform = transform;
  document.querySelector(".square").style.msTransform = transform;
},50);

预览效果：https://codepen.io/fe_fly_girl/pen/eYJeVjN