3. Apply a unique rotate transform to each sticky note below. Use values between -75deg and 75deg Use the id selectors in formatting.css to apply these styles. 4. When a user hovers over a sticky note, the element should rotate back to an unrotated position. Moreover, the element should scale to 1.25x its original size. It should complete this transition in 500ms o create : hover selectors for each id selector in animations-transitions.css to complete this task
I need help with making the auditions needed in the image I have provided the code this is what I have so far Below please help.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lab 14</title>
</head>
<body>
<div>
<h2>Sticky Note Board</h2>
<div class="sticky-board">
<div style="display: relative;">
<div class="sticky-note" id="first">
<div class="sticky-note-title">
Transforms
</div>
<div class="sticky-note-body">CSS transforms change the shape and position of the affected content without disrupting the normal document flow.</div>
</div>
</div>
<div class="sticky-note" id="second">
<div class="sticky-note-title">
Translate
</div>
<div class="sticky-note-body"><code>translate()</code> repositions an element in the horizontal and/or vertical directions.</div>
</div>
<div class="sticky-note" id="third">
<div class="sticky-note-title">
Scale
</div>
<div class="sticky-note-body"><code>scale()</code> defines a transformation that resizes an element on the 2D plane</div>
</div>
<div class="sticky-note" id="fourth">
<div class="sticky-note-title">
Rotate
</div>
<div class="sticky-note-body"><code>rotate()</code> defines a transformation that rotates an element around a fixed point on the 2D plane</div>
</div>
<div class="sticky-note" id="fifth">
<div class="sticky-note-title">
Skew
</div>
<div class="sticky-note-body"><code>skew()</code> defines a transformation that distorts an element on the 2D plane</div>
</div>
<div class="sticky-note" id="sixth">
<div class="sticky-note-title">
Matrix
</div>
<div class="sticky-note-body"><code>matrix()</code> defines a homogeneous 2D transformation matrix</div>
</div>
</div>
</div>
</body>
</html>
<style>
/* colors.css */
.sticky-note {
/* DON'T EDIT ME */
color: black;
background: #D29DE9;
}
.sticky-note-title {
/* DON'T EDIT ME */
color: inherit;
}
.sticky-note-body {
/* DON'T EDIT ME */
color: inherit;
}
#first {
background-color:#9857B4;
}
#second {
background-color:#D29DE9;
}
#third {
background-color:#FA66BC;
}
#fourth {
background-color:#F6B744;
}
#fifth {
background-color:#C3E129;
}
#sixth {
background-color:#E6E921;
}
/* formatting.css*/
.sticky-note-title {
/* DON'T EDIT ME */
padding: 1rem;
font-size: 2rem;
}
.sticky-note-body {
/* DON'T EDIT ME */
transform: rotate(0);
padding: 1rem;
font-size: 1.5rem;
}
.sticky-board {
/* DON'T EDIT ME */
margin-top: 2em;
display: flex;
padding: 3em;
flex-wrap: wrap;
gap: 1em;
justify-content: center;
}
.sticky-note {
flex-shrink: 0;
width: 20em;
height: 20em;
/* Add styles here */
}
#first {
/* Add styles here */
/* initial state */
}
#second {
/* Add styles here */
/* initial state */
}
#third {
/* Add styles here */
/* initial state */
}
#fourth {
/* Add styles here */
/* initial state */
}
#fifth {
/* Add styles here */
/* initial state */
}
#sixth {
/* Add styles here */
/* initial state */
}
/* animations-transitions.css*/
.sticky-note {
/* Add styles here */
/* transition properties here! */
/* global animation properties here! */
}
#first {
/* Add styles here */
/* unique animation properties here */
}
#second {
/* Add styles here */
/* unique animation properties here */
}
#third {
/* Add styles here */
/* unique animation properties here */
}
#fourth {
/* Add styles here */
/* unique animation properties here */
}
#fifth {
/* Add styles here */
/* unique animation properties here */
}
#sixth {
/* Add styles here */
/* unique animation properties here */
}
/* add hover selectors for the each id selector */
/* create a keyframe animation "fall" below */
</style>
Step by step
Solved in 4 steps with 2 images
