Scale css

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

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

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

Code: CSS

2021-02-04 10:43:00

.selector {
  transform: scale(1.2); // Will upscale to 1.2
}

5

SY_Yoo

Code: CSS

2021-05-01 23:47:28

transform: scale(sx,sy);

4

Tom Anderson

Code: CSS

2021-08-29 09:59:56

/* <length-percentage> values */
transform: translateX(200px);
transform: translateX(50%);

1

user31380

Code: CSS

2021-02-21 17:08:29

Read this comprehensive article about CSS animation transform property. 
It also has many useful examples that help you in best way.

https://medium.com/swlh/learn-css-transform-animation-zero-to-hero-6a2a643bd56b

2

Ellbot

Code: CSS

2021-02-15 22:46:44

scale=For a two dimentional animation

0

Nikola Stankovic

Code: CSS

2021-02-15 22:45:04

scale(sx)

scale(sx, sy)

0

Tags

Related

New to Communities?