Create CSS3 2D动画旋转.html

Rain120 · Jan 25, 2018 · 295ed65 · 295ed65
1 parent 665096d
commit 295ed65
Showing 1 changed file with 88 additions and 0 deletions.
diff --git a/CSS3 2D动画旋转.html b/CSS3 2D动画旋转.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+  <title>CSS3 2D动画旋转</title>
+  <style>
+    div {
+      margin: 50px;
+      height: 90px;  
+      width: 90px;
+      background: gray;
+    }
+
+    .r1 {
+      transform: rotate(30deg);
+    }
+
+    .r2 {
+      transform: rotate(-30deg);
+    }
+
+    .t1 {
+      transform: translate(-50px)
+    }
+
+    .t2 {
+      transform: translate(50px)
+    }
+
+    .t3 {
+      transform: translate(50px, 50px)
+    }
+
+
+    .s1 {
+      margin-top: 100px;
+      transform: scale(2)
+    }
+
+    .s2 {
+      margin-top: 100px;
+      transform: scale(-2)
+    }
+
+    .s3 {
+      transform: scale(0.5)
+    }
+
+    .s4 {
+      transform: scale(-0.5)
+    }
+
+    .sk1 {
+      transform: skew(30deg)
+    }
+
+    .sk2 {
+      transform: skew(-30deg)
+    }
+
+    .sk3 {
+      transform: skew(30deg, -30deg)
+    }
+
+    .sk4 {
+      transform: skew(-30deg, 30deg)
+    }
+
+    .m {
+      transform: matrix(1, 0, 0, 1, 30, 30);
+    }
+  </style>
+</head>
+<body>
+  <div>参照物</div>
+  <div class="r1">rotate1</div>
+  <div class="r2">rotate2</div>
+  <div class="t1">translate1</div>
+  <div class="t2">translate2</div>
+  <div class="t3">translate3</div>
+  <div class="s1">scale1</div>
+  <div class="s2">scale2</div>
+  <div class="sk1">skew1</div>
+  <div class="sk2">skew2</div>
+  <div class="m">matrix</div>
+</body>
+</html>