The index.html
file has two buttons: # left
and # right
.
When the #left
button is pressed, the .box
element must rotate 30 degrees counterclockwise.
When the #right
button is pressed, the .box
element should rotate 30 degrees clockwise.
Add transformation styles using the style
attribute.
Initially, there should be no style
attribute.
Use internal scripts.
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>Rotate</title>
<style>
body {
height: 100vh;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
.box {
width: 200px;
height: 200px;
background-color: #9CFC97;
position: relative;
}
button {
margin: 20px;
}
</style>
</head>
<body>
<button class="rotate-left">-30 deg</button>
<div class="box"></div>
<button class="rotate-right">+30 deg</button>
</body>
</html>