svg+css实现图标点击变形动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：svg+css实现图标点击变形动画效果代码

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

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

<head>
  <meta charset="UTF-8">
  

  
  
<style>
@media screen and (max-width: 800px) {
  html {
    font-size: 10px;
  }
}
@media screen and (max-width: 450px) {
  html {
    font-size: 6px;
  }
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: black;
  overflow: hidden;
}

.menu {
  position: relative;
  display: block;
  width: 10rem;
  height: 10rem;
  margin: 2rem 6rem;
  cursor: pointer;
  transition: transform 0.5s ease;
  transform-style: preserve-3d;
  transform-origin: center center 5rem;
}
.menu__face {
  position: absolute;
  top: 0;
  left: 0;
  width: 10rem;
  height: 10rem;
  transition: transform 0.5s ease;
  transform-origin: center center 5rem;
}
.menu__face--d2 {
  transform: rotate3d(0, 1, 0, 90deg);
}
.menu__face--d3 {
  transform: translateZ(10rem);
}
.menu__face--d4 {
  transform: rotate3d(0, -1, 0, 90deg);
}
.menu__face--d5 {
  transform: rotate3d(-1, 0, 0, 90deg);
}
.menu__face--d6 {
  transform: rotate3d(1, 0, 0, 90deg);
}
.menu__face--axis-vertical {
  transform: translateZ(5rem);
}
.menu__face--axis-horizontal {
  transform: rotate3d(-1, 0, 0, 90deg) translateZ(5rem);
}
.menu__face--square {
  background-color: rgba(0, 0, 0, 0.5);
}
.menu--minimal .menu__face--square {
  background: none;
}
.menu[data-position="1"] {
  transform: rotate3d(0, 1, 0, 90deg);
}
.menu[data-position="2"] {
  transform: rotate3d(0, 1, 0, 90deg) rotate3d(0, 0, 1, 90deg) rotate3d(0, 1, 0, 90deg);
}
.menu[data-position="3"] {
  transform: rotate3d(0, 1, 0, 90deg) rotate3d(0, 0, 1, 90deg) rotate3d(0, 1, 0, 90deg) rotate3d(0, 1, 0, 90deg) rotate3d(0, 0, 1, 90deg);
}
</style>



  
  
</head>

<body translate="no">
  <div class="menu">
  <div class="menu__face menu__face--square menu__face--d1 menu__face--hamburger">
    <svg width="10rem" height="10rem" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
      <g fill="#FFF" fill-rule="evenodd">
        <rect x="0" y="0" width="40" height="5" />
        <rect x="0" y="35" width="40" height="5" />
      </g>
    </svg>
  </div>
  <div class="menu__face menu__face--square menu__face--d2 menu__face--cross">
    <svg width="10rem" height="10rem" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
      <g fill="#FFF" fill-rule="evenodd">
        <rect x="0" y="0" width="5" height="5" />
        <rect x="35" y="0" width="5" height="5" />
        <rect x="0" y="35" width="5" height="5" />
        <rect x="35" y="35" width="5" height="5" />
        <rect x="-5" y="16.5" width="50" height="7" style="transform: rotate(45deg); transform-origin: center;" />
        <rect x="-5" y="16.5" width="50" height="7" style="transform: rotate(-45deg); transform-origin: center;" />
      </g>
    </svg>
  </div>
  <div class="menu__face menu__face--square menu__face--d3 menu__face--hamburger">

    <svg width="10rem" height="10rem" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
      <g fill="#FFF" fill-rule="evenodd">
        <rect x="0" y="0" width="40" height="5" />
        <rect x="0" y="35" width="40" height="5" />
      </g>
    </svg>
  </div>
  <div class="menu__face menu__face--square menu__face--d4 menu__face--cross"><svg width="10rem" height="10rem" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
      <g fill="#FFF" fill-rule="evenodd">
        <rect x="0" y="0" width="5" height="5" />
        <rect x="35" y="0" width="5" height="5" />
        <rect x="0" y="35" width="5" height="5" />
        <rect x="35" y="35" width="5" height="5" />
        <rect x="-5" y="16.5" width="50" height="7" style="transform: rotate(45deg); transform-origin: center;" />
        <rect x="-5" y="16.5" width="50" height="7" style="transform: rotate(-45deg); transform-origin: center;" />
      </g>
    </svg></div>
  <div class="menu__face menu__face--square menu__face--d5 menu__face--hamburger menu__face--hamburger-rotated"><svg width="10rem" height="10rem" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
      <g fill="#FFF" fill-rule="evenodd">
        <rect x="0" y="0" width="40" height="5" />
        <rect x="0" y="35" width="40" height="5" />
      </g>
    </svg></div>
  <div class="menu__face menu__face--square menu__face--d6 menu__face--hamburger menu__face--hamburger-rotated"><svg class="menu__hamburger" width="10rem" height="10rem" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
      <g fill="#FFF" fill-rule="evenodd">
        <rect x="0" y="0" width="40" height="5" />
        <rect x="0" y="35" width="40" height="5" />
      </g>
    </svg>
  </div>
  <div class="menu__face menu__face--axis menu__face--axis-vertical"><svg width="10rem" height="10.........完整代码请登录后点击上方下载按钮下载查看