I really 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. only need help with 5 because number 6 just hints my teacher left me but they have me confused. Lab 14 Sticky Note Board Transforms CSS transforms change the shape and position of the affected content without disrupting the normal document flow. Translate translate() repositions an element in the horizontal and/or vertical directions. Scale scale() defines a transformation that resizes an element on the 2D plane Rotate rotate() defines a transformation that rotates an element around a fixed point on the 2D plane Skew skew() defines a transformation that distorts an element on the 2D plane Matrix matrix() defines a homogeneous 2D transformation matrix
I really 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. only need help with 5 because number 6 just hints my teacher left me but they have me confused.
<!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 {
transform: rotate(75deg);
transition: transform 500ms;
}
#second {
transform: rotate(75deg);
transition: transform 500ms;
}
#third {
transform: rotate(75deg);
transition: transform 500ms;
}
#fourth {
transform: rotate(75deg);
transition: transform 500ms;
}
#fifth {
transform: rotate(75deg);
transition: transform 500ms;
}
#sixth {
transform: rotate(75deg);
transition: transform 500ms;
}
/* animations-transitions.css*/
.sticky-note {
/* Add styles here */
/* transition properties here! */
/* global animation properties here! */
}
#first:hover{
transform: rotate(0deg);
transform: scale(1.25);
}
#second:hover {
transform: rotate(0deg);
transform: scale(1.25);
}
#third:hover {
transform: rotate(0deg);
transform: scale(1.25);
}
#fourth:hover {
transform: rotate(0deg);
transform: scale(1.25);
}
#fifth:hover {
transform: rotate(0deg);
transform: scale(1.25);
}
#sixth:hover {
transform: rotate(0deg);
transform: scale(1.25);
}
/* add hover selectors for the each id selector */
/* create a keyframe animation "fall" below */
</style>
Step by step
Solved in 4 steps with 1 images
