Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<html>
<head>
<title>Transform and Blend Mode</title>
<style>
body {
background: cornflowerblue;
}
.box-blend-mode {
width: 64px;
height: 64px;
margin-bottom: 1em;
background-color: hsla(0,0%,0%,.25);
mix-blend-mode: multiply;
}
.box-blend-mode-inner {
width: 48px;
height: 48px;
background-image: url("../backgrounds/transparent-32x32.png");
background-position: center center;
background-repeat: no-repeat;
mix-blend-mode: multiply;
}
.box-blend-mode-inner.transformed {
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="box-blend-mode">
<div class="box-blend-mode-inner"></div>
</div>
<div class="box-blend-mode">
<div class="box-blend-mode-inner"></div>
</div>
</body>
</html>