当我发现过滤器压平变换时,我正在尝试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)