While playing around with CSS transforms, I discovered that filters flatten the transforms just like setting transform-style: flat.
var toggleFilter = function() {
var div = document.getElementById("cube")
if (div.className == "cube") {
div.className = "cube filter"
} else {
div.className = "cube"
}
}* {
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;
width: 100px;
background: red;
transform: rotateY(90deg) rotateX(-90deg) translateZ(-50px) translateX(50px);
border: solid 2px black;
box-sizing: border-box;
}
div.perspective {
perspective: 900px;
position: absolute;
margin: 50px;
}
.filter {
filter: opacity(1);
-webkit-filter: opacity(1);
}<div class="perspective">
<div id="cube" class="cube">
<div class="face1"></div>
<div class="face2"></div>
</div>
</div>
<button onclick="toggleFilter()">Toggle .filter</button>Check out this fiddle for a demonstration. I searched everywhere but couldn't find any information on this particular issue. If anyone knows a workaround for this problem, please let me know.