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

代码语言：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>

<body>
  <div class="container">
  <div class="cube animate">
    <textarea class="face">Puedo escribir los versos más tristes esta noche.	Escribir, por ejemplo: «La noche está estrellada,	y tiritan, azules, los astros, a lo lejos».	El viento de la noche gira en el cielo y canta.	Puedo escribir los versos más tristes esta noche.	Yo la quise, y a veces ella también me quiso.	En las noches como ésta la tuve entre mis brazos.	La besé tantas veces bajo el cielo infinito. Ella me quiso, a veces yo también la quería. Cómo no haber amado sus grandes ojos fijos.	Puedo escribir los versos más tristes esta noche.	Pensar que no la tengo. Sentir que la he perdido.	Oír la noche inmensa, más inmensa sin ella.	Y el verso cae al alma como al pasto el rocío. Qué importa que mi amor no pudiera guardarla. La noche está estrellada y ella no está conmigo. Eso es todo. A lo lejos alguien canta. A lo lejos	mi alma no se contenta con haberla perdido.	Como para acercarla mi mirada la busca.	Mi corazón la busca, y ella no está conmigo. La misma noche que hace blanquear los mismos árboles. Nosotros, los de entonces, ya no somos los mismos. Ya no la quiero, es cierto, pero cuánto la quise.	Mi voz buscaba el viento para tocar su oído. De otro. Será de otro. Como antes de mis besos. Su voz, su cuerpo claro. Sus ojos infinitos.	Ya no la quiero, es cierto, pero tal vez la quiero.	Es tan corto el amor, y es tan largo el olvido.	Porque en noches como ésta la tuve entre mis brazos, mi alma no se contenta con haberla perdido. Aunque éste sea el último dolor que ella me causa, y estos sean los últimos versos que yo le escribo.</textarea>
    <textarea class="face">Puedo escribir los versos más tristes esta noche.	Escribir, por ejemplo: «La noche está estrellada,	y tiritan, azules, los astros, a lo lejos».	El viento de la noche gira en el cielo y canta.	Puedo escribir los versos más tristes esta noche.	Yo la quise, y a veces ella también me quiso.	En las noches como ésta la tuve entre mis brazos.	La besé tantas veces bajo el cielo infinito. Ella me quiso, a veces yo también la quería. Cómo no haber amado sus grandes ojos fijos.	Puedo escribir los versos más tristes esta noche.	Pensar que no la tengo. Sentir que la he perdido.	Oír la noche inmensa, más inmensa sin ella.	Y el verso cae al alma como al pasto el rocío. Qué importa que mi amor no pudiera guardarla. La noche está estrellada y ella no está conmigo. Eso es todo. A lo lejos alguien canta. A lo lejos	mi alma no se contenta con haberla perdido.	Como para acercarla mi mirada la busca.	Mi corazón la busca, y ella no está conmigo. La misma noche que hace blanquear los mismos árboles. Nosotros, los de entonces, ya no somos los mismos. Ya no la quiero, es cierto, pero cuánto la quise.	Mi voz buscaba el viento para tocar su oído. De otro. Será de otro. Como antes de mis besos. Su voz, su cuerpo claro. Sus ojos infinitos.	Ya no la quiero, es cierto, pero tal vez la quiero.	Es tan corto el amor, y es tan largo el olvido.	Porque en noches como ésta la tuve entre mis brazos, mi alma no se contenta con haberla perdido. Aunque éste sea el último dolor que ella me causa, y estos sean los últimos versos que yo le escribo.</textarea>
    <textarea class="face">Puedo escribir los versos más tristes esta noche.	Escribir, por ejemplo: «La noche está estrellada,	y tiritan, azules, los astros, a lo lejos».	El viento de la noche gira en el cielo y canta.	Puedo escribir los versos más tristes esta noche.	Yo la quise, y a veces ella también me quiso.	En las noches como ésta la tuve entre mis brazos.	La besé tantas veces bajo el cielo infinito. Ella me quiso, a veces yo también la quería. Cómo no haber amado sus grandes ojos fijos.	Puedo escribir los versos más tristes esta noche.	Pensar que no la tengo. Sentir que la he perdido.	Oír la noche inmensa, más inmensa sin ella.	Y el verso cae al alma como al pasto el rocío. Qué importa que mi amor no pudiera guardarla. La noche está estrellada y ella no está conmigo. Eso es todo. A lo lejos alguien canta..........完整代码请登录后点击上方下载按钮下载查看