css实现悬浮三维翻转信封卡片效果代码-html代码-BFW代码库

css实现悬浮三维翻转信封卡片效果代码

代码语言：html

所属分类：悬停

代码描述：css实现悬浮三维翻转信封卡片效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  justify-items: center;
  align-items: center;
  background: var(--corner);
  --architect: "Architects Daughter", cursive;
  --indie: "Indie Flower", cursive;
  --black: #313131;
  --blue: #3B98C4;
  --teal: #79CCAA;
  --yellow: #F0DA4B;
  --purple: #BE7AC5;
  --pink: #D9679B;
  --gradient: linear-gradient(45deg, hsla(199, 54%, 50%, 1) 0%, hsla(155, 45%, 64%, 1) 19%, hsla(52, 85%, 62%, 1) 47%, hsla(294, 39%, 63%, 1) 82%, hsla(151, 39%, 54%, 1) 100%);
  --corner: radial-gradient(farthest-corner at 40px 40px, hsla(199, 54%, 50%, 1) 0%, hsla(155, 45%, 64%, 1) 19%, hsla(52, 85%, 62%, 1) 47%, hsla(294, 39%, 63%, 1) 82%, hsla(151, 39%, 54%, 1) 100%);
  --radial: radial-gradient(ellipse at top, #F0DA4B, #3B98C4, #79CCAA, transparent), radial-gradient(ellipse at bottom, #D9679B, #BE7AC5, transparent);
}

.postcardfront {
  padding: 3rem;
  height: 350px;
  width: 550px;
  border-radius: 15px;
  background-color: var(--black);
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='16' viewBox='0 0 12 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 .99C4 .445 4.444 0 5 0c.552 0 1 .45 1 .99v4.02C6 5.555 5.556 6 5 6c-.552 0-1-.45-1-.99V.99zm6 8c0-.546.444-.99 1-.99.552 0 1 .45 1 .99v4.02c0 .546-.444.99-1 .99-.552 0-1-.45-1-.99V8.99z' fill='%23dfdfdf' fill-opacity='0.15' fill-rule='evenodd'/%3E%3C/svg%3E");
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  -webkit-backface-visibility: hidden;
  /* Safari */
  backface-visibility: hidden;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

.fronttext {
  grid-row: 1;
  grid-column: 1;
  align-self: center;
  text-align: center;
  margin-top: -6rem;
  font-size: 2rem;
  color: #ccc;
  font-family: var(--architect);
  line-height: 2rem;
  text-transform: uppercase;
}

.fronttext span {
  background: var(--gradient);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-weight: bold;
}

.rainbow {
  margin: 0 auto;
  margin-top: 150px;
  width: 200px;
  height: 200px;
  box-shadow: 0 0 0 10px #be7ac5, 0 0 0 20px #9d64ff, 0 0 0 30px #2c7bab, 0 0 0 40px #79ccaa, 0 0 0 50px #f0da4b, 0 0 0 60px #f0904b, 0 0 0 70px #d9679b;
  border-radius: 100px;
  position: absolute;
  bottom: -150px;
  left: 45%;
  transform: translateX(-50%);
  grid-row: 1;
  grid-column: 1;
}

.postcardwrap {
  perspective: 1000px;
  background-color: transparent;
  height: 350px;
  width: 550px;
}

.postcardin {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.postcardback {
  background: var(--black);
  transform: rotateY(-180deg);
  padding: 0.5rem;
  height: 350px;
  width: 550px;
  border-radius: 15px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

.postbackborder {
  background: #d9679b;
  background: linear-gra.........完整代码请登录后点击上方下载按钮下载查看