css实现立方体悬浮选择扩展动画效果代码-html代码-BFW代码库

css实现立方体悬浮选择扩展动画效果代码

代码语言：html

所属分类：悬停

代码描述：css实现立方体悬浮选择扩展动画效果代码

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
body {
  margin-top: 10em;
  background: rgb(167,219,216);
}

.base {
  font-size: 1.8em;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-perspective: 1000px;
          perspective: 1000px;
  height: 3em;
  width: 3em;
  margin: 0 auto;
  -webkit-perspective-origin: 50% 50%;
          perspective-origin: 50% 50%;
  -webkit-transition: -webkit-transform 1s ease-in-out, -webkit-perspective-origin 1s ease-in-out;
          transition: transform 1s ease-in-out, perspective-origin 1s ease-in-out;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.box {
  display: block;
  font-size: 1em;
  position: absolute;
  height: 2em;
  width: 2em;
  -webkit-transition: -webkit-transform 1s ease-in-out;
          transition: transform 1s ease-in-out;
  -webkit-transform: rotateX(-30deg) rotateY(-135deg);
          transform: rotateX(-30deg) rotateY(-135deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.box .face {
  position: relative;
  bottom: 0;
  width: 2em;
  height: 2em;
}
.box .side-0,
.box .side-1 {
  overflow: hidden;
  height: 2em;
}
.box .side-0 {
  -webkit-transform: rotateY(90deg) translateZ(1em);
          transform: rotateY(90deg) translateZ(1em);
  background-color: rgb(241, 241, 241);
}
.box .side-1 {
  -webkit-transform: rotateY(180deg) translateY(-2em) translateZ(1em);
          transform: rotateY(180deg) translateY(-2em) translateZ(1em);
  background-color: rgb(216, 216, 216);
}
.box .top {
  -webkit-transition: box-shadow .3s ease-in-out;
          transition: box-shadow .3s ease-in-out;
  -webkit-transform: rotateX(90deg) translateZ(5em);
          transform: rotateX(90deg) translateZ(5em);
  background-color: rgb(255, 255, 255);
}
.box .bottom {
  -webkit-transform: rotateX(-90deg) translateY(0em) translateZ(-5em) rotate(180deg);
          transform: rotateX(-90deg) translateY(0em) translateZ(-5em) rotate(180deg);
  -webkit-transition: box-shadow 1.2s;
          transition: box-shadow 1.2s;
}


.base:hover {
  -webkit-perspective-origin: 50% 0%;
          perspective-origin: 50% 0%;
}

.box:hover .top::after {
  content: "";
  display: block;
  height: 2em;
  width: 2em;
  background-color: rgba(218,226,237, .5);
}

.box:focus .top {
  -webkit-transform: rotateX(90deg) translateZ(calc(5em + 1.2px)) !important;
          transform: rotateX(90deg) translateZ(calc(5em + 1.2px)) !important;
}

.base:hover .box:focus .top {
.........完整代码请登录后点击上方下载按钮下载查看