blob: 6935926de104a1b6236e278833b4e32aee34813a [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<style>
.reflection1 {
width: 200px;
-webkit-box-reflect: right 30px;
}
.reflection2 {
width: 100px;
opacity: 0.5;
-webkit-box-reflect: right 10px;
position: relative;
}
.reflection2 div {
height: 80px;
width: 100px;
background-color: blue;
will-change: transform;
}
.reflection2 .child2 {
margin-top: -60px;
}
</style>
</head>
<body>
There are four light blue squares.
<div class="reflection1">
<div class="reflection2">
<div>
</div>
<div class="child2">
</div>
</div>
</div>
</body>
</html>