Let’s write a script and transformations that will open the window.
When clicking on the button of an element with the class .blind, you need to add the class .opened.
When adding the .opened class, the shutters (.blind) must rotate 15 degrees and move 100px along the X axis.
Note - the direction of opening and shift on .left and .right are different.
We also need to move the shutters a little further away from us - 15px.
This task is part of the Full-Stack JavaScript Course
If you have any issues with it, you can ask for community help below the post
Feel free to help others if you’ve already solved the task
index.html
<!DOCTYPE html>
<html>
<head>
<title>Window</title>
<style>
body {
display: grid;
place-items: center;
height: 100vh;
}
.window {
width: 200px;
height: 200px;
position: relative;
perspective: 200px;
border: 5px solid #312509;
}
.view {
width: 200px;
height: 200px;
background-color: aqua;
background-image: url(images/mountains.jpeg);
background-size: cover;
}
.blind {
position: absolute;
width: 100px;
height: 200px;
top: 0;
background-color: #65532F;
border: 5px solid #312509;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
.plank {
width: 75%;
height: 8px;
background-color: #312509;
}
.right {
right: 0;
}
button {
margin-top: 20px;
width: 100%;
border-radius: 5px;
padding: 8px;
border: none;
outline: none;
}
</style>
</head>
<body>
<div class="window">
<div class="view"></div>
<div class="blind left">
<div class="plank"></div>
<div class="plank"></div>
<div class="plank"></div>
<div class="plank"></div>
<div class="plank"></div>
</div>
<div class="blind right">
<div class="plank"></div>
<div class="plank"></div>
<div class="plank"></div>
<div class="plank"></div>
<div class="plank"></div>
</div>
<button>Open the window</button>
</div>
</body>
</html>