cssanimations/2dtransform.htm at master · Priyal2807/cssanimations · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<! DOCTYPE html>
<html>
<head>
  <title>
    2-D transform css
  </title>
  <style>
  div{
    width: 250px;
    height: 250px;
    border-radius: 30px;
    border: 4px solid #29B6F6;
    text-align: center;
    color:black;
    background-color: #58D68D  ;
  }
  div#special{
    -ms-transform:translate(60px,100px);
    -webkit-transform:translate(60px,100px);
    transform:translate(60px,100px);
  }
  div#special1{
    -ms-transform:scale(2,2);
    -webkit-transform:scale(2,2);
    transform: scale(2,2);
  }
  div#special2{
    -ms-transform:rotate(30deg);
    -webkit-transform:rotate(30deg);
    transform:rotate(30deg);
  }
  div#special3{
    -ms-transform:skew(20deg,10deg);
    -webkit-transform:skew(20deg,10deg);
    transform:skew(20deg,10deg);
  }
  </style>
</head>
<body>
  <div>
    This is a normal box</n></n></n></div>
    <div id="special1">This is a scaled box</n></n></div>
    <div id="special2">This is a box rotated in clockwise direction</n></n></div>
    <div id="special3">This is a skewed box in both x and y directions</n></n></div>
    <div id="special">This is a translated box</n></div>
</body>
</html>