10 달 전 · 4088f4bd41
--- a/css3/19.旋转正方体.html
+++ b/css3/19.旋转正方体.html
@@ -0,0 +1,72 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <title>Document</title>
			
 
				+    <style>
			
 
				+        * {
			
 
				+            margin: 0;
			
 
				+            padding: 0;
			
 
				+        }
			
 
				+        body {
			
 
				+            perspective: 1000px;
			
 
				+        }
			
 
				+        #container {
			
 
				+            width: 200px;
			
 
				+            height: 200px;
			
 
				+            margin: 200px auto;
			
 
				+            transform-style:preserve-3d;
			
 
				+            position: relative;
			
 
				+            animation: run 3s 1 infinite;
			
 
				+            transform: scale3d(1,1,1);
			
 
				+        }
			
 
				+        @keyframes run {
			
 
				+            100% {
			
 
				+                transform: rotateX(360deg);
			
 
				+            }
			
 
				+        }
			
 
				+        #container div {
			
 
				+            width: 200px;
			
 
				+            height: 200px;
			
 
				+            border:1px solid #000;
			
 
				+            position: absolute;
			
 
				+            opacity: .5;
			
 
				+        }
			
 
				+        #box1 {
			
 
				+            background: url("./images/a.jpg");
			
 
				+            transform: translateZ(100px);
			
 
				+        }
			
 
				+        #box2 {
			
 
				+            background: url("./images/b.jpg");
			
 
				+            transform: rotateY(180deg) translateZ(100px);
			
 
				+        }
			
 
				+        #box3 {
			
 
				+            background: url("./images/c.jpg");
			
 
				+            transform: rotateY(90deg)  translateZ(100px);
			
 
				+        }
			
 
				+        #box4 {
			
 
				+            background: url("./images/d.jpg");
			
 
				+            transform: rotateY(-90deg)  translateZ(100px);
			
 
				+        }
			
 
				+        #box5 {
			
 
				+            background: url("./images/e.jpg");
			
 
				+            transform: rotateX(90deg)  translateZ(100px);
			
 
				+        }
			
 
				+        #box6 {
			
 
				+            background: url("./images/f.jpg");
			
 
				+            transform: rotateX(-90deg) translateZ(100px);
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div id="container">
			
 
				+        <div id="box1"></div>
			
 
				+        <div id="box2"></div>
			
 
				+        <div id="box3"></div>
			
 
				+        <div id="box4"></div>
			
 
				+        <div id="box5"></div>
			
 
				+        <div id="box6"></div>
			
 
				+    </div>
			
 
				+</body>
			
 
				+</html>
			
--- a/css3/images/1.jpg
+++ b/css3/images/1.jpg
--- a/css3/images/1.png
+++ b/css3/images/1.png
--- a/css3/images/10.jpg
+++ b/css3/images/10.jpg
--- a/css3/images/11.jpg
+++ b/css3/images/11.jpg
--- a/css3/images/12.jpg
+++ b/css3/images/12.jpg
--- a/css3/images/13.jpg
+++ b/css3/images/13.jpg
--- a/css3/images/14.jpg
+++ b/css3/images/14.jpg
--- a/css3/images/15.jpg
+++ b/css3/images/15.jpg
--- a/css3/images/16.jpg
+++ b/css3/images/16.jpg
--- a/css3/images/17.jpg
+++ b/css3/images/17.jpg
--- a/css3/images/18.jpg
+++ b/css3/images/18.jpg
--- a/css3/images/19.jpg
+++ b/css3/images/19.jpg
--- a/css3/images/2.jpg
+++ b/css3/images/2.jpg
--- a/css3/images/20.jpg
+++ b/css3/images/20.jpg
--- a/css3/images/21.jpg
+++ b/css3/images/21.jpg
--- a/css3/images/22.jpg
+++ b/css3/images/22.jpg
--- a/css3/images/23.jpg
+++ b/css3/images/23.jpg
--- a/css3/images/24.jpg
+++ b/css3/images/24.jpg
--- a/css3/images/3.jpg
+++ b/css3/images/3.jpg
--- a/css3/images/4.jpg
+++ b/css3/images/4.jpg
--- a/css3/images/5.jpg
+++ b/css3/images/5.jpg
--- a/css3/images/6.jpg
+++ b/css3/images/6.jpg
--- a/css3/images/7.jpg
+++ b/css3/images/7.jpg
--- a/css3/images/8.jpg
+++ b/css3/images/8.jpg
--- a/css3/images/9.jpg
+++ b/css3/images/9.jpg
--- a/css3/images/a.jpg
+++ b/css3/images/a.jpg
--- a/css3/images/b.jpg
+++ b/css3/images/b.jpg
--- a/css3/images/c.jpg
+++ b/css3/images/c.jpg
--- a/css3/images/d.jpg
+++ b/css3/images/d.jpg
--- a/css3/images/e.jpg
+++ b/css3/images/e.jpg
--- a/css3/images/f.jpg
+++ b/css3/images/f.jpg