html和css3 js 3D 相框动画翻转效果cid1084-网页前端设计

作者code

html and css

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <style>
  7. /*
  9. Full-page view:
  11. https://codepen.io/GeorgePark/full/gegavO/
  13. */
  15. @import url(https://fonts.googleapis.com/css?family=Montserrat:500);
  17. :root {
  18. /* Base font size */
  19. font-size: 10px;
  21. /* Border color variable */
  22. --border-color: #f5f3f1;
  23. }
  25. * {
  26. box-sizing: border-box;
  27. }
  29. body {
  30. font-family: "Montserrat", Arial, sans-serif;
  31. font-weight: 500;
  32. line-height: 1.5;
  33. text-align: center;
  34. min-height: 100vh;
  35. padding: 4rem 2rem;
  36. color: #fafafa;
  39. }
  41. h1 {
  42. font-size: 4rem;
  43. }
  45. h2 {
  46. font-size: 2rem;
  47. margin-bottom: 2.5rem;
  48. }
  50. .cube-container {
  51. position: relative;
  52. width: 30rem;
  53. height: 30rem;
  54. margin: 5rem auto 6rem;
  55. perspective: 100rem;
  56. }
  58. .cube {
  59. position: absolute;
  60. width: 100%;
  61. height: 100%;
  62. transform-style: preserve-3d;
  63. transition: transform 1s cubic-bezier(0.32, 0.05, 0.35, 1.6);
  64. }
  66. .cube-face-image {
  67. display: block;
  68. position: absolute;
  70. }
  72. .image-buttons {
  73. display: grid;
  74. grid-template-columns: repeat(3, auto);
  75. grid-gap: 1.5rem;
  76. justify-content: center;
  77. }
  79. .image-buttons input {
  80. border: 0.2rem solid #fafafa;
  82. }
  84. .image-buttons input:focus {
  85. outline: none;
  87. }
  89. /* Transform images to create cube */
  91. .image-1 {
  92. transform: translateZ(15rem);
  93. }
  95. .image-2 {
  96. transform: rotateX(-180deg) translateZ(15rem);
  97. }
  99. .image-3 {
  100. transform: rotateY(90deg) translateZ(15rem);
  101. }
  103. .image-4 {
  104. transform: rotateY(-90deg) translateZ(15rem);
  105. }
  107. .image-5 {
  108. transform: rotateX(90deg) translateZ(15rem);
  109. }
  111. .image-6 {
  112. transform: rotateX(-90deg) translateZ(15rem);
  113. }
  115. /* Transform cube to show correct image */
  117. .cube.initial-position {
  118. transform: translateZ(-15rem) translateY(-2rem) rotateX(-15deg) rotateY(18deg) rotateZ(2deg);
  119. }
  121. .cube.show-image-1 {
  122. transform: translateZ(-15rem);
  123. }
  125. .cube.show-image-2 {
  126. transform: translateZ(-15rem) rotateX(180deg);
  127. }
  129. .cube.show-image-3 {
  130. transform: translateZ(-15rem) rotateY(-90deg);
  131. }
  133. .cube.show-image-4 {
  134. transform: translateZ(-15rem) rotateY(90deg);
  135. }
  137. .cube.show-image-5 {
  138. transform: translateZ(-15rem) rotateX(-90deg);
  139. }
  141. .cube.show-image-6 {
  142. transform: translateZ(-15rem) rotateX(90deg);
  143. }
  146. </style>
  147. </head>
  148. <body>
  151. <div class="cube-container">
  153. <div class="cube initial-position">
  155. <img class="cube-face-image image-1" src="one.jpg">
  157. <img class="cube-face-image image-2" src="two.jpg">
  159. <img class="cube-face-image image-3" src="three.jpg">
  161. <img class="cube-face-image image-4" src="four.jpg">
  163. <img class="cube-face-image image-5" src="five.jpg">
  165. <img class="cube-face-image image-6" src="six.jpg">
  167. </div>
  169. </div>
  173. <div class="image-buttons">
  175. <input type="image" class="show-image-1" src="1.jpg"></input>
  177. <input type="image" class="show-image-2" src="2.jpg"></input>
  179. <input type="image" class="show-image-3" src="3.jpg"></input>
  181. <input type="image" class="show-image-4" src="4.jpg"></input>
  183. <input type="image" class="show-image-5" src="5.jpg"></input>
  185. <input type="image" class="show-image-6" src="6.jpg"></input>
  187. </div>
  188. <script>
  190. "use strict";
  192. //DOM load event
  193. window.addEventListener("DOMContentLoaded", function () {
  194. var cube = document.querySelector(".cube"),
  195. imageButtons = document.querySelector(".image-buttons");
  196. var cubeImageClass = cube.classList[1]; //Add click event listener to image buttons container
  198. imageButtons.addEventListener("click", function (e) {
  199. //Get node type and class value of clicked element
  200. var targetNode = e.target.nodeName,
  201. targetClass = e.target.className; //Check if image input has been clicked and isn't the currently shown image
  203. if (targetNode === "INPUT" && targetClass !== cubeImageClass) {
  204. console.log("Show Image: ".concat(targetClass.charAt(11))); //Replace previous cube image class with new class
  206. cube.classList.replace(cubeImageClass, targetClass); //Update cube image class variable with new class
  208. cubeImageClass = targetClass;
  209. }
  210. });
  211. });
  216. </script>
  217. </body>
  218. </html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    /*

Full-page view:

https://codepen.io/GeorgePark/full/gegavO/

*/

@import url(https://fonts.googleapis.com/css?family=Montserrat:500);

:root {
  /* Base font size */
  font-size: 10px;

  /* Border color variable */
  --border-color: #f5f3f1;
}

* {
  box-sizing: border-box;
}

body {
  font-family: "Montserrat", Arial, sans-serif;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  min-height: 100vh;
  padding: 4rem 2rem;
  color: #fafafa;
     
 
}

h1 {
  font-size: 4rem;
}

h2 {
  font-size: 2rem;
  margin-bottom: 2.5rem;
}

.cube-container {
  position: relative;
  width: 30rem;
  height: 30rem;
  margin: 5rem auto 6rem;
  perspective: 100rem;
}

.cube {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 1s cubic-bezier(0.32, 0.05, 0.35, 1.6);
}

.cube-face-image {
  display: block;
  position: absolute;
 
}

.image-buttons {
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-gap: 1.5rem;
  justify-content: center;
}

.image-buttons input {
  border: 0.2rem solid #fafafa;
     
}

.image-buttons input:focus {
  outline: none;
  
}

/* Transform images to create cube */

.image-1 {
  transform: translateZ(15rem);
}

.image-2 {
  transform: rotateX(-180deg) translateZ(15rem);
}

.image-3 {
  transform: rotateY(90deg) translateZ(15rem);
}

.image-4 {
  transform: rotateY(-90deg) translateZ(15rem);
}

.image-5 {
  transform: rotateX(90deg) translateZ(15rem);
}

.image-6 {
  transform: rotateX(-90deg) translateZ(15rem);
}

/* Transform cube to show correct image */

.cube.initial-position {
  transform: translateZ(-15rem) translateY(-2rem) rotateX(-15deg) rotateY(18deg) rotateZ(2deg);
}

.cube.show-image-1 {
  transform: translateZ(-15rem);
}

.cube.show-image-2 {
  transform: translateZ(-15rem) rotateX(180deg);
}

.cube.show-image-3 {
  transform: translateZ(-15rem) rotateY(-90deg);
}

.cube.show-image-4 {
  transform: translateZ(-15rem) rotateY(90deg);
}

.cube.show-image-5 {
  transform: translateZ(-15rem) rotateX(-90deg);
}

.cube.show-image-6 {
  transform: translateZ(-15rem) rotateX(90deg);
}

    
    </style>
</head>
<body>
    

<div class="cube-container">

  <div class="cube initial-position">

    <img class="cube-face-image image-1" src="one.jpg">
    
    <img class="cube-face-image image-2" src="two.jpg">
    
    <img class="cube-face-image image-3" src="three.jpg">
    
    <img class="cube-face-image image-4" src="four.jpg">
    
    <img class="cube-face-image image-5" src="five.jpg">
    
    <img class="cube-face-image image-6" src="six.jpg">

  </div>

</div>

 

<div class="image-buttons">

  <input type="image" class="show-image-1" src="1.jpg"></input>

  <input type="image" class="show-image-2" src="2.jpg"></input>

  <input type="image" class="show-image-3" src="3.jpg"></input>

  <input type="image" class="show-image-4" src="4.jpg"></input>

  <input type="image" class="show-image-5" src="5.jpg"></input>

  <input type="image" class="show-image-6" src="6.jpg"></input>

</div>
<script>

"use strict";

//DOM load event
window.addEventListener("DOMContentLoaded", function () {
  var cube = document.querySelector(".cube"),
      imageButtons = document.querySelector(".image-buttons");
  var cubeImageClass = cube.classList[1]; //Add click event listener to image buttons container

  imageButtons.addEventListener("click", function (e) {
    //Get node type and class value of clicked element
    var targetNode = e.target.nodeName,
        targetClass = e.target.className; //Check if image input has been clicked and isn't the currently shown image

    if (targetNode === "INPUT" && targetClass !== cubeImageClass) {
      console.log("Show Image: ".concat(targetClass.charAt(11))); //Replace previous cube image class with new class

      cube.classList.replace(cubeImageClass, targetClass); //Update cube image class variable with new class

      cubeImageClass = targetClass;
    }
  });
});




</script>
</body>
</html>

在线演示

让链接同时具备两种打开方式
获取源码: Cube
下载数:96人次, 文件大小: 343.8 KB, 上传日期: 2020年-11 月-25日

公众号回复:gcode  获取解压密码

qrcode_for_gh_6ea2c28a1709_258 (1)

2,850 人查阅

类似文章