css实现三维盒子点击打开产品商品切换效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：css实现电商三维盒子点击打开产品商品详细信息切换效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
    
:root {
  --duration: .6s;
  --ease: cubic-bezier(.5, 0, .5, 1);
  --fast-ease-out: cubic-bezier(.4,0,.9,.1);
  --fast-ease-in: cubic-bezier(.1,.9,.3,1);
  --fade-ease: cubic-bezier(.7,0,.1,1);
  --tan-dark: #AF957D;
  --tan: #E9CFB9;
  --orange: #FC7B1C;
  --orange-dark: #DE762A;
  font-family: "Roboto Condensed", sans-serif;
}

*,
*:before,
*:after {
  position: relative;
  box-sizing: border-box;
}

img {
  display: block;
  max-width: 100%;
}

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #E4C7B3;
}

#app {
  background: white;
  height: 90vmin;
  width: 50vmin;
  background: #EAEAEC;
  border-radius: 8vmin;
  border: 2vmin solid white;
}

.shoe-selector {
  display: grid;
  grid-template: 1 / 1;
  justify-content: center;
  align-items: center;
  height: 90%;
}
.shoe-selector:before {
  content: '';
  height: 10vmin;
  width: 10vmin;
  position: absolute;
  background-color: #3E474E;
  border-radius: 50%;
  bottom: -5vmin;
  left: calc(50% - 5vmin);
  z-index: 10;
}

/* ---------------------------------- */
.shoe {
  height: 100%;
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 50% auto 1fr auto;
  padding: 1rem;
}
.shoe:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  background-image: linear-gradient(to bottom, transparent, transparent 40%, white);
  border-radius: 1rem;
}
.shoe > .shoebox {
  grid-column: 1 / -1;
}
.shoe > .shoe-header {
  grid-column: 1 / -1;
}
.shoe > .shoe-price {
  grid-column: 1 / -1;
}
.shoe > .shoe-rating {
  grid-column: 1 / 2;
}

.shoe-header {
  text-align: center;
}

.shoe-subheading {
  display: inline-block;
  text-transform: uppercase;
  color: #777;
  margin-bottom: .5rem;
}

.shoe-heading {
  margin: 0;
  font-weight: 300;
  font-size: 1.25rem;
}

.shoe-price {
  display: inline-block;
  text-align: center;
  font-size: 3rem;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}
.shoe-price > span {
  display: inline-block;
}

.shoe-rating {
  height: 3rem;
  width: 3rem;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
  border-radius: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #eee;
  overflow: hidden;
}
.shoe-rating > span {
  text-align: center;
  display: inline-block;
  width: 100%;
}

/* ---------------------------------- */
.shoe-selector {
  -webkit-perspective: 80vmin;
          perspective: 80vmin;
}

.shoe {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.shoebox {
  --width: 23vmin;
  --height: 18vmin;
  --depth: 10vmin;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  width: var(--width);
  height: var(--height);
  margin: 13vmin auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1vmin;
}

.side {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  width: var(--width);
  height: var(--height);
  box-sizing: border-box;
  background: var(--debug);
  border: solid 2px var(--color-dark);
  background: var(--color);
  background: linear-gradient(to bottom, var(--color-dark), var(--color));
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: translate(-50%, -50%) var(--rotation) translateZ(calc(var(--z) / 2));
          transform: translate(-50%, -50%) var(--rotation) translateZ(calc(var(--z) / 2));
}
.side.right:before, .side.left:before, .side.back:before,
.side .lid:before {
  --color: var(--tan);
  --color-dark: var(--tan-dark);
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  -webkit-transform: translateZ(-2px);
          transform: translateZ(-2px);
  border: solid 2px var(--color-dark);
  background-image: linear-gradient(to right, var(--color-dark), var(--color));
}
.side.right:before {
  background-image: linear-gradient(to left, var(--color-dark), var(--color));
}
.side.back:before {
  background-image: linear-gradient(to bottom, var(--color-dark), var(--color));
}
.side.bottom {
  background-image: radial-gradient(var(--color-dark) 30%, var(--color));
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1), inset 0 0 2vmin var(--color-dark);
}
.side .lid:before {
  background-image: linear-gradient(to bottom, var(--color-dark), var(--color));
}

.top,
.bottom {
  --debug: red;
  --z: var(--depth);
}

.right,
.left {
  --debug: green;
  width: var(--depth);
  --z: var(--width);
}

.front,
.back {
  --debug: blue;
  width: var(--width);
  height: var(--depth);
  --z: var(--height);
}

.top {
  --rotation: rotateY(0deg);
}

.bottom {
  --rotation: rotateY(180deg);
}

.right {
  --rotation: rotateY(90deg);
}

.left {
  --rotation: rotateY(-90deg);
}

.back {
  --rotation: rotateX(90deg);
}

.front {
  --rotation: rotateX(-90deg);
}

.top,
.lid,
.right,
.left,
.front {
  --color: var(--orange);
  --color-dark: var(--orange-dark);
}

.bottom,
.back {
  --color: var(--tan);
  --color-dark: var(--tan-dark);
}

/* ---------------------------------- */
.shoebox .top {
  background: none;
}
.shoebox .lid {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  visibility: visible;
  background: linear-gradient(to top, var(--color-dark), var(--color) 50%);
  width: 100%;
  height: 100%;
  transition: -webkit-transform var(--duration) var(--ease);
  transition: transform var(--duration) var(--ease);
  transition: transform var(--duration) var(--ease), -webkit-transform var(--duration) var(--ease);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform-origin: top center;
          transform-origin: top center;
}

[data-active] .shoebox .lid {
  -webkit-transform: rotateX(90deg);
          transform: rotateX(90deg);
}

/* ---------------------------------- */
.shoe {
  width: 40vmin;
  pointer-events: none;
}
.shoe:not([data-active]) * {
  visibility: hidden;
}
.shoe [data-animate], .shoe [data-animate] * {
  visibility: visible !important;
}
.shoe [data-animate] {
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  opacity: 0;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
  transition-duration: var(--duration);
  transition-timing-function: var(--fast-ease-out), var(--fade-ease);
}
.shoe .shoebox {
  cursor: pointer;
  pointer-events: auto;
  -webkit-transform: rotateX(5deg) translateX(-120%);
          transform: rotateX(5deg) translateX(-120%);
  transition: -webkit-transform var(--duration) var(--ease) !important;
  transition: transform.........完整代码请登录后点击上方下载按钮下载查看