2 rokov pred · d5a5de234e
--- a/7_Css3/13_旋转的立方体.html
+++ b/7_Css3/13_旋转的立方体.html
@@ -0,0 +1,79 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+  <meta charset="UTF-8">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+  <title>Document</title>
			
 
				+  <style>
			
 
				+    *{
			
 
				+      margin: 0;
			
 
				+      padding: 0;
			
 
				+    }
			
 
				+    body{
			
 
				+      perspective: 800px;
			
 
				+    }
			
 
				+    #container{
			
 
				+      width: 200px;
			
 
				+      height: 200px;
			
 
				+      margin: 100px auto;
			
 
				+      transform-style: preserve-3d;
			
 
				+      position: relative;
			
 
				+      animation: run 2s linear infinite;
			
 
				+    }
			
 
				+    #container div{
			
 
				+      width: 200px;
			
 
				+      height: 200px;
			
 
				+      opacity: 0.5;
			
 
				+      border: 1px solid #000;
			
 
				+      position: absolute;
			
 
				+    }
			
 
				+    #div1{
			
 
				+      background: url("image/a.jpg");
			
 
				+      transform: translateZ(100px);
			
 
				+    }
			
 
				+    #div2{
			
 
				+      background: url("image/b.jpg");
			
 
				+      transform: rotateY(180deg)  translateZ(100px)
			
 
				+    }
			
 
				+    #div3{
			
 
				+      background: url("image/c.jpg");
			
 
				+      transform: rotateY(-90deg) translateZ(100px);
			
 
				+    }
			
 
				+    #div4{
			
 
				+      background: url("image/d.jpg");
			
 
				+      transform: rotateY(90deg) translateZ(100px);
			
 
				+    }
			
 
				+    #div5{
			
 
				+      background: url("image/e.jpg");
			
 
				+      /* transform: translateY(-100px)  rotateX(30deg); */
			
 
				+      transform: rotateX(90deg) translateZ(100px)
			
 
				+    }
			
 
				+    #div6{
			
 
				+      background: url("image/f.jpg");
			
 
				+      transform: rotateX(-90deg) translateZ(100px);
			
 
				+    }
			
 
				+    @keyframes run{
			
 
				+      100%{
			
 
				+        transform: rotateY(360deg);
			
 
				+      }
			
 
				+    }
			
 
				+  </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+  <div id="container">
			
 
				+    <!-- <img src="image/a.jpg" alt="">
			
 
				+    <img src="image/b.jpg" alt="">
			
 
				+    <img src="image/c.jpg" alt="">
			
 
				+    <img src="image/d.jpg" alt="">
			
 
				+    <img src="image/e.jpg" alt="">
			
 
				+    <img src="image/f.jpg" alt=""> -->
			
 
				+    <div id="div1"></div>
			
 
				+    <div id="div2"></div>
			
 
				+    <div id="div3"></div>
			
 
				+    <div id="div4"></div>
			
 
				+    <div id="div5"></div>
			
 
				+    <div id="div6"></div>
			
 
				+  </div>
			
 
				+</body>
			
 
				+</html>
			
--- a/7_Css3/image/.DS_Store
+++ b/7_Css3/image/.DS_Store
--- a/7_Css3/image/1.jpg
+++ b/7_Css3/image/1.jpg
--- a/7_Css3/image/10.jpg
+++ b/7_Css3/image/10.jpg
--- a/7_Css3/image/11.jpg
+++ b/7_Css3/image/11.jpg
--- a/7_Css3/image/12.jpg
+++ b/7_Css3/image/12.jpg
--- a/7_Css3/image/13.jpg
+++ b/7_Css3/image/13.jpg
--- a/7_Css3/image/14.jpg
+++ b/7_Css3/image/14.jpg
--- a/7_Css3/image/15.jpg
+++ b/7_Css3/image/15.jpg
--- a/7_Css3/image/16.jpg
+++ b/7_Css3/image/16.jpg
--- a/7_Css3/image/17.jpg
+++ b/7_Css3/image/17.jpg
--- a/7_Css3/image/18.jpg
+++ b/7_Css3/image/18.jpg
--- a/7_Css3/image/19.jpg
+++ b/7_Css3/image/19.jpg
--- a/7_Css3/image/2.jpg
+++ b/7_Css3/image/2.jpg
--- a/7_Css3/image/20.jpg
+++ b/7_Css3/image/20.jpg
--- a/7_Css3/image/21.jpg
+++ b/7_Css3/image/21.jpg
--- a/7_Css3/image/22.jpg
+++ b/7_Css3/image/22.jpg
--- a/7_Css3/image/23.jpg
+++ b/7_Css3/image/23.jpg
--- a/7_Css3/image/24.jpg
+++ b/7_Css3/image/24.jpg
--- a/7_Css3/image/3.jpg
+++ b/7_Css3/image/3.jpg
--- a/7_Css3/image/4.jpg
+++ b/7_Css3/image/4.jpg
--- a/7_Css3/image/5.jpg
+++ b/7_Css3/image/5.jpg
--- a/7_Css3/image/6.jpg
+++ b/7_Css3/image/6.jpg
--- a/7_Css3/image/7.jpg
+++ b/7_Css3/image/7.jpg
--- a/7_Css3/image/8.jpg
+++ b/7_Css3/image/8.jpg
--- a/7_Css3/image/9.jpg
+++ b/7_Css3/image/9.jpg
--- a/7_Css3/image/a.jpg
+++ b/7_Css3/image/a.jpg
--- a/7_Css3/image/b.jpg
+++ b/7_Css3/image/b.jpg
--- a/7_Css3/image/bg.jpg
+++ b/7_Css3/image/bg.jpg
--- a/7_Css3/image/c.jpg
+++ b/7_Css3/image/c.jpg
--- a/7_Css3/image/d.jpg
+++ b/7_Css3/image/d.jpg
--- a/7_Css3/image/e.jpg
+++ b/7_Css3/image/e.jpg
--- a/7_Css3/image/f.jpg
+++ b/7_Css3/image/f.jpg