2 years ago · 18065993a1
--- a/6_Css3/10_transform3D.html
+++ b/6_Css3/10_transform3D.html
@@ -0,0 +1,37 @@
 
				+<!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;
			
 
				+    }
			
 
				+    #div1{
			
 
				+      width: 200px;
			
 
				+      height: 200px;
			
 
				+      border: 1px dashed #000;
			
 
				+      margin: 100px auto;
			
 
				+      transform: rotateY(45deg);
			
 
				+      /* 指定子元素在三维空间内 */
			
 
				+      transform-style: preserve-3d;
			
 
				+    }
			
 
				+    #div2{
			
 
				+      width: 200px;
			
 
				+      height: 200px;
			
 
				+      background: aqua;
			
 
				+      transform: rotateY(45deg);
			
 
				+    }
			
 
				+  </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+  <div id="div1">
			
 
				+    <div id="div2"></div>
			
 
				+  </div>
			
 
				+</body>
			
 
				+</html>
			
--- a/6_Css3/11_transition.html
+++ b/6_Css3/11_transition.html
@@ -0,0 +1,33 @@
 
				+<!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>
			
 
				+    #div1{
			
 
				+      width: 200px;
			
 
				+      height: 200px;
			
 
				+      background: red;
			
 
				+      /* 过度      属性  执行时间  运动方式  延迟时间 */
			
 
				+      transition: width 2s linear 2s;
			
 
				+      /* transition-property: 属性 ; */
			
 
				+      /* transition-duration: 执行时间; */
			
 
				+      /* transition-timing-function: 运动方式; */
			
 
				+      /* transition-delay: 延迟时间; */
			
 
				+    }
			
 
				+  </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+  <div id="div1"></div>
			
 
				+  <button id="btn">点击</button>
			
 
				+  <script>
			
 
				+    var div1 = document.getElementById('div1')
			
 
				+    var btn = document.getElementById('btn')
			
 
				+    btn.onclick = function(){
			
 
				+      div1.style.width = div1.offsetWidth + 500 + 'px'
			
 
				+    }
			
 
				+  </script>
			
 
				+</body>
			
 
				+</html>
			
--- a/6_Css3/12_animation.html
+++ b/6_Css3/12_animation.html
@@ -0,0 +1,32 @@
 
				+<!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>
			
 
				+    #div1{
			
 
				+      width: 200px;
			
 
				+      height: 200px;
			
 
				+      background: red;
			
 
				+      animation: run 5s linear 1s 2 ;
			
 
				+    }
			
 
				+    /* 定义动画 */
			
 
				+    @keyframes run{
			
 
				+      10%{
			
 
				+        width: 800px;
			
 
				+      }
			
 
				+      50%{
			
 
				+        width: 100px;
			
 
				+      }
			
 
				+      100%{
			
 
				+        width: 300px;
			
 
				+      }
			
 
				+    }
			
 
				+  </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+  <div id="div1"></div>
			
 
				+</body>
			
 
				+</html>
			
--- a/6_Css3/14_旋转立方体.html
+++ b/6_Css3/14_旋转立方体.html
@@ -0,0 +1,73 @@
 
				+<!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;
			
 
				+      position: relative;
			
 
				+      margin: 100px auto;
			
 
				+      transform-style: preserve-3d;
			
 
				+      animation: run 3s 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); */
			
 
				+      transform: translateZ(-100px) rotateY(180deg);
			
 
				+    }
			
 
				+    #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: 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">
			
 
				+    <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/6_Css3/image/.DS_Store
+++ b/6_Css3/image/.DS_Store
--- a/6_Css3/image/1.jpg
+++ b/6_Css3/image/1.jpg
--- a/6_Css3/image/10.jpg
+++ b/6_Css3/image/10.jpg
--- a/6_Css3/image/11.jpg
+++ b/6_Css3/image/11.jpg
--- a/6_Css3/image/12.jpg
+++ b/6_Css3/image/12.jpg
--- a/6_Css3/image/13.jpg
+++ b/6_Css3/image/13.jpg
--- a/6_Css3/image/14.jpg
+++ b/6_Css3/image/14.jpg
--- a/6_Css3/image/15.jpg
+++ b/6_Css3/image/15.jpg
--- a/6_Css3/image/16.jpg
+++ b/6_Css3/image/16.jpg
--- a/6_Css3/image/17.jpg
+++ b/6_Css3/image/17.jpg
--- a/6_Css3/image/18.jpg
+++ b/6_Css3/image/18.jpg
--- a/6_Css3/image/19.jpg
+++ b/6_Css3/image/19.jpg
--- a/6_Css3/image/2.jpg
+++ b/6_Css3/image/2.jpg
--- a/6_Css3/image/20.jpg
+++ b/6_Css3/image/20.jpg
--- a/6_Css3/image/21.jpg
+++ b/6_Css3/image/21.jpg
--- a/6_Css3/image/22.jpg
+++ b/6_Css3/image/22.jpg
--- a/6_Css3/image/23.jpg
+++ b/6_Css3/image/23.jpg
--- a/6_Css3/image/24.jpg
+++ b/6_Css3/image/24.jpg
--- a/6_Css3/image/3.jpg
+++ b/6_Css3/image/3.jpg
--- a/6_Css3/image/4.jpg
+++ b/6_Css3/image/4.jpg
--- a/6_Css3/image/5.jpg
+++ b/6_Css3/image/5.jpg
--- a/6_Css3/image/6.jpg
+++ b/6_Css3/image/6.jpg
--- a/6_Css3/image/7.jpg
+++ b/6_Css3/image/7.jpg
--- a/6_Css3/image/8.jpg
+++ b/6_Css3/image/8.jpg
--- a/6_Css3/image/9.jpg
+++ b/6_Css3/image/9.jpg
--- a/6_Css3/image/a.jpg
+++ b/6_Css3/image/a.jpg
--- a/6_Css3/image/b.jpg
+++ b/6_Css3/image/b.jpg
--- a/6_Css3/image/bg.jpg
+++ b/6_Css3/image/bg.jpg
--- a/6_Css3/image/c.jpg
+++ b/6_Css3/image/c.jpg
--- a/6_Css3/image/d.jpg
+++ b/6_Css3/image/d.jpg
--- a/6_Css3/image/e.jpg
+++ b/6_Css3/image/e.jpg
--- a/6_Css3/image/f.jpg
+++ b/6_Css3/image/f.jpg