相关疑难解决方法(0)

CSS滤镜打破3D变换

当我发现过滤器压平变换时,我正在尝试CSS变换,就像transform-style: flat.

var toggleFilter = function() {
  var div = document.getElementById("cube")
  if (div.className == "cube") {
    div.className = "cube filter"
  } else {
    div.className = "cube"
  }
}
Run Code Online (Sandbox Code Playgroud)
* {
  transform-style: preserve-3d
}
div.cube {
  height: 100px;
  width: 100px;
  background: blue;
  transform: rotateX(45deg) rotateZ(45deg);
  border: solid 2px black;
  box-sizing: border-box;
}
div.face1 {
  content: "";
  height: 100px;
  width: 100px;
  background: green;
  transform: rotateY(90deg) translateZ(50px) translateX(50px);
  border: solid 2px black;
  box-sizing: border-box;
}
div.face2 {
  content: "";
  height: 100px; …
Run Code Online (Sandbox Code Playgroud)

html javascript css css-transforms css-filters

5
推荐指数
1
解决办法
578
查看次数

标签 统计

css ×1

css-filters ×1

css-transforms ×1

html ×1

javascript ×1