css+div实现三维盒子文字旋转动画效果代码-html代码-BFW代码库

css+div实现三维盒子文字旋转动画效果代码

代码语言：html

所属分类：三维

代码描述：css+div实现三维盒子文字旋转动画效果代码

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


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

<head>

  <meta charset="UTF-8">

  <link href='https://fonts.googleapis.com/css?family=Raleway:400,100,300,500,600,700,800,900' rel='stylesheet' type='text/css'>


  
  
<style>
html, body {
  height: 100%;
  overflow: hidden;
}

body {
  background: #640a0f;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent), linear-gradient(rgba(255, 255, 255, 0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.5) 1px, transparent 1px), linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.3) 1px, transparent 1px), #640a0f;
  box-shadow: inset 0 0 10em rgba(0, 0, 0, 0.5), 0 0 1em rgba(0, 0, 0, 0.8);
  font-family: Raleway, sans-serif;
  font-weight: 100;
}

.container {
  perspective: 1000px;
  perspective-origin: 50% 50%;
  width: 80%;
  margin: 0 auto;
  padding: 15%;
}

.animate {
  animation: spinningH 6s infinite linear;
}

.cube {
  position: relative;
  margin: 0 auto;
  height: 360px;
  width: 360px;
  transition: transform 2s linear;
  transform-style: preserve-3d;
  transform: translateX(180px);
}
.cube > .face {
  position: absolute;
  height: 360px;
  width: 360px;
  background-color: rgba(255, 255, 255, 0.6);
  border: 0;
  resize: none;
  color: #000;
  text-align: left;
  font-variant-ligatures: normal;
  text-rendering: optimizeLegibility;
}
.cube .face:nth-child(1) {
  transform: translateZ(180px);
}
.cube .face:nth-child(2) {
  transform: rotateY(90deg) translateZ(180px);
}
.cube .face:nth-child(3) {
  transform: rotateY(180deg) translateZ(180px);
}
.cube .face:nth-child(4) {
  transform: rotateY(-90deg) translateZ(180px);
}
.cube .face:nth-child(5) {
  transform: rotateX(-90deg) translateZ(180px) rotate(180deg);
}
.cube .face:nth-child(6) {
  transform: rotateX(90deg) translateZ(180px);
}
</style>

</head>
.........完整代码请登录后点击上方下载按钮下载查看