transform属性 | 码农工具

​x
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>transform 属性</title>
</head>
<body>
  <h1>transform 属性</h1>
  
  <br/>
  <div class="relative">
   <div class="absolute"></div>
   <div class="absolute matrix">1、matrix</div>
  </div>
  <br/>
  <br/>
  <div class="relative">
   <div class="absolute"></div>
   <div class="absolute translate">2、translate</div>
  </div>
  <br/>
  <br/>
  <div class="relative">
   <div class="absolute"></div>
   <div class="absolute scale">3、scale</div>
  </div>
  <br/>
  <br/>
  <div class="relative">
   <div class="absolute"></div>
   <div class="absolute rotate">4、rotate</div>
  </div>
  <br/>
  <br/>
  <div class="relative">
   <div class="absolute"></div>
   <div class="absolute skew">5、skew</div>
  </div>
  
  <br/>
</body>
</html>

HTML

xxxxxxxxxx
 
div{
  width: 200px;
  height: 50px;
  //border: solid 1px red;
  background: lightgrey;
}
​
.relative {
  position: relative;
}
.absolute {
  position: absolute;
  left: 0;
  top: 0;
}
​
.matrix:hover {
  transform:matrix(0.866,0.5,-0.5,0.866,0,0);
  background: lightblue;
}
​
.translate:hover {
  transform:translate(10px, 10px);
  background: lightblue;
}
​
.scale:hover {
  transform:scale(0.8, 0.8);
  background: lightblue;
}
​
.rotate:hover {
  transform:rotate(10deg);
  background: lightblue;
}
​
.skew:hover {
  transform:skew(10deg, 10deg);
  background: lightblue;
}

CSS