Transformations
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="transform.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transformations</title>
</head>
<body>
<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>
<div id="four">4</div>
<div id="five">5</div>
</body>
</html>
CSS
div {
height: 50px;
width: 100px;
border: 5px solid black;
}
div:nth-of-type(2n) {
background-color: aqua;
}
div:nth-of-type(2n + 1) {
background-color: blueviolet;
}
/* TRANSFORMATIONS */
/* ROTATION */
#one {
transform: rotate(45deg);
}
#two {
transform: rotate(-45deg);
}
/* TRANSLATION */
#two {
transform: translate(23px, 24px);
}
#three {
transform: translateX(55px);
}
#four {
transform: translateY(44px);
}
/* SCALIING */
#two {
transform: scale(2);
}
#one {
transform: scaleX(0.5);
}
#three {
transform: scaleY(2);
}
#four {
transform: scale(1, 0.5);
}
/* SKEW */
#one {
transform: skew(30deg);
}
#four {
transform: skew(-45deg);
}
/* ALL */
#five {
transform: rotate(23deg) translate(22px) skew(23deg) scale(2);
}
Comments
Post a Comment