3d

Fabian-Martinez-Rincon · Feb 15, 2022 · 569d01b · 569d01b
1 parent 66f3444
commit 569d01b
Show file tree

Hide file tree

Showing 6 changed files with 147 additions and 2 deletions.
diff --git a/Estilos/Efecto3d/index.html b/Estilos/Efecto3d/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Cartas en 3d</title>
+    <link rel="stylesheet" href="style.css">  
+</head>
+<body>
+    <div class="container">
+        <div class="box">
+            <h2 class="name">Product Name</h2>
+
+        </div>
+
+    </div>
+    <script src="/vanilla-tilt.min.js"></script>
+    <script>
+        VanillaTilt.init(document.querySelector(".box"), {
+		max: 25,
+		speed: 400
+	});
+    </script>
+</body>
+</html>
diff --git a/Estilos/Efecto3d/style.css b/Estilos/Efecto3d/style.css
@@ -0,0 +1,50 @@
+*
+{
+    margin: 0;
+    padding:0;
+    font-family: 'Poppins',sans-serif;
+}
+body
+{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    background-color: #131313;
+}
+.container
+{
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    width: 1200px;
+    transform-style:preserve-3d ;
+}
+.container .box
+{
+    position: relative;
+    width: 300px;
+    height: 400px;
+    margin: 40px;
+    background: #232323;
+    border-radius: 20px;
+    transform-style:preserve-3d ;
+}
+.container .box::before
+{
+    content: 'NIKE';
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    font-size: 6em;
+    font-weight: 900;
+    color: #fff;
+    font-style: italic;
+    opacity: 0;
+}
+.container .box:hover::before
+{
+    opacity: 0.4;
+}
diff --git a/Estilos/Efecto3d/vanilla-tilt.min.js b/Estilos/Efecto3d/vanilla-tilt.min.js
diff --git a/index.html b/index.html
@@ -296,7 +296,7 @@ <h5>Resoluciones</h5>
                 </div>
 
                 <div class="carousel-item">
-                  <div class="binary_to_decimal2">
+                  <div class="binary_to_decimal3">
                     <div class="container">
                       <h2>Punto Flotante Binario</h2>
                       <div class="field2">
@@ -440,7 +440,26 @@ <h5>Resultado</h5>
   <script src="materialize.js"></script>
   <script src="main.js"></script>
   <script src="main2.js"></script>
-
+  <script src="./js/vanilla-tilt.min.js"></script>
+  <script>
+      VanillaTilt.init(document.querySelector(".binary_to_decimal"), {
+  max: 6,
+  speed: 7000
+});
+  </script>
+
+<script>
+  VanillaTilt.init(document.querySelector(".binary_to_decimal2"), {
+max: 6,
+speed: 7000
+});
+</script>
+<script>
+  VanillaTilt.init(document.querySelector(".binary_to_decimal3"), {
+max: 6,
+speed: 7000
+});
+</script>