V.Lydia
V.Lydia
Programming language:CSS
2021-02-23 04:42:03
18
Q:

css transform

Winda
Winda
Code: CSS
2021-02-04 10:40:59 
<style>
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}
.rotated {
  transform: rotate(45deg);
  background-color: pink;
}
</style>

/* In body of html doc */
<div>Normal</div>
<div class="rotated">Rotated</div>
5
user9046
user9046
Code: CSS
2021-02-04 10:42:05 
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.rotated {
  transform: rotate(45deg); /* Equal to rotateZ(45deg) */
  background-color: pink;
}
9
Alan Lian
Alan Lian
Code: CSS
2021-04-23 02:24:30 
div{
  transform: translate(50px, 200px);
}
3
Abi
Abi
Code: CSS
2021-02-04 10:43:47 
transform: matrix(1, 2, 3, 4, 5, 6);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: translate(120px, 50%);
transform: scale(2, 0.5);
transform: rotate(0.5turn);
transform: skew(30deg, 20deg);
transform: scale(0.5) translate(-100%, -100%);
transform: perspective(17px);
17
ToadallyTerrific
ToadallyTerrific
Code: CSS
2021-02-12 19:48:39 
div {
  position: absolute;
  left: 40px;
  top: 40px;
  width: 100px;
  height: 100px;
  background-color: lightgray;
}

.rotate {
  background-color: transparent;
  outline: 2px dashed;
  transform: rotate(45deg);
}

.rotate-translate {
  background-color: pink;
  transform: rotate(45deg) translateX(180px);
}

.translate-rotate {
  background-color: gold;
  transform: translateX(180px) rotate(45deg);
}
4
Jenn D.
Jenn D.
Code: CSS
2021-02-04 10:40:16 
<!DOCTYPE html>
<html>
<head>
<style> 
div.a {
  width: 150px;
  height: 80px;
  background-color: yellow;
  -ms-transform: rotate(20deg); /* IE 9 */
  transform: rotate(20deg);
}

div.b {
  width: 150px;
  height: 80px;
  background-color: yellow;
  -ms-transform: skewY(20deg); /* IE 9 */
  transform: skewY(20deg);
}

div.c {
  width: 150px;
  height: 80px;
  background-color: yellow;
  -ms-transform: scaleY(1.5); /* IE 9 */
  transform: scaleY(1.5);
}
</style>
</head>
<body>

<h1>The transform Property</h1>

<h2>transform: rotate(20deg):</h2>
<div class="a">Hello World!</div>
<br>

<h2>transform: skewY(20deg):</h2>
<div class="b">Hello World!</div>
<br>

<h2>transform: scaleY(1.5):</h2>
<div class="c">Hello World!</div>

</body>
</html>
4
Benjamin1956
Benjamin1956
Code: CSS
2021-02-04 10:43:00 
.selector {
  transform: scale(1.2); // Will upscale to 1.2
}
5
nazly
nazly
Code: CSS
2021-02-02 14:51:00 
.selector {
  transition: transform 1s;
}
2
Sun
Sun
Code: CSS
2021-02-04 10:41:34 
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.rotated {
  transform: rotate(45deg); /* Equal to rotateZ(45deg) */
  background-color: pink;
}
0

Tags

Related

New to Communities?

Join the community