HTML&CSS:3D 旋转卡片的炫酷动画

效果演示

这段代码是一个HTML和CSS的组合,用于创建一个具有3D效果的动画卡片。

HTML

html 复制代码
<div class="obj">
  <div class="objchild">
    <span class="inn6">
      <h3 class="text">我是谁?我在那</h3>
    </span>
  </div>
</div>
  • obj:创建了一个类名为 "obj" 的div元素,它将作为3D对象的容器。
  • objchild:创建了一个类名为 "objchild" 的div元素,它将作为3D对象的子元素。
  • inn6:创建了一个类名为 "inn6" 的span元素,它将包含文本内容。
  • text:创建了一个标题为 "我是谁?我在那" 的h3元素,它将显示在页面上。

CSS

css 复制代码
.obj {
  position: relative;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
  transition: 0.5s all;
  transform: rotateX(-25deg) rotateY(20deg);

}

.objchild {
  animation: rotate 4s infinite linear;
  transform-style: preserve-3d;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.objchild::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  filter: blur(20px);
  box-shadow: 0 0 200px 15px white;
  transform: rotateX(90deg) scale(1.1) translateZ(-120px);
}

.inn6 {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgb(21, 21, 21);
  transform: rotateX(90deg) translateZ(100px);
  animation: updown 4s infinite ease-in-out;
  border-radius: 10px;
}

.text {
  color: #fff;
  font-size: 20px;
  text-align: center;
  line-height: 200px;
  font-weight: 600;
}

@keyframes rotate {
  0% {
    transform: rotate3d(0, 1, 0, 0deg);
  }

  100% {
    transform: rotate3d(0, 1, 0, 360deg);
  }
}

@keyframes updown {
  0% {
    transform: translateY(100px) rotateX(90deg) translateZ(100px);
  }

  50% {
    transform: translateY(200px);
  }

  100% {
    transform: translateY(100px) rotateX(450deg) translateZ(100px);
  }
}
  • .obj 类定义了一个相对定位的容器,宽200px,高200px。transform-style: preserve-3d; 保持3D效果,transition: 0.5s all; 表示所有属性的过渡时间为0.5秒。transform: rotateX(-25deg) rotateY(20deg); 表示对象将绕X轴旋转-25度,绕Y轴旋转20度。
  • .objchild 类定义了一个绝对定位的子元素,它将填满其父元素。animation: rotate 4s infinite linear; 表示动画名为 "rotate",持续时间为4秒,无限循环,线性速度。transform-style: preserve-3d; 保持3D效果。
  • .objchild::after 是一个伪元素,用于创建一个模糊的白色光晕效果。filter: blur(20px); 应用20像素的模糊效果,box-shadow: 0 0 200px 15px white; 创建一个白色的阴影效果,transform: rotateX(90deg) scale(1.1) translateZ(-120px); 表示伪元素将绕X轴旋转90度,放大1.1倍,并在Z轴上向后移动。
  • .inn6 类定义了一个绝对定位的span元素,它将填满其父元素。背景色为黑色,transform: rotateX(90deg) translateZ(100px); 表示元素将绕X轴旋转90度,并在Z轴上向前移动100px。animation: updown 4s infinite ease-in-out; 表示动画名为 "updown",持续时间为4秒,无限循环,缓动函数为ease-in-out。
  • @keyframes rotate 定义了一个名为 "rotate" 的关键帧动画,从0度旋转到360度。
  • @keyframes updown 定义了一个名为 "updown" 的关键帧动画,元素将上下移动,并在X轴和Z轴上旋转。
相关推荐
一 乐28 分钟前
基于vue船运物流管理系统设计与实现(源码+数据库+文档)
前端·javascript·数据库·vue.js·spring boot·后端·船运系统
m0_5287238138 分钟前
在React中使用redux
前端·javascript·react.js
傻小胖1 小时前
vue3中customRef的用法以及使用场景
前端·javascript·vue.js
谦谦橘子1 小时前
手把手教你实现一个富文本
前端·javascript
star010-1 小时前
【视频+图文详解】HTML基础4-html标签的基本使用
前端·windows·经验分享·网络安全·html·html5
engchina1 小时前
CSS Display属性完全指南
前端·css
stark张宇1 小时前
Web - CSS3基础语法与盒模型
css3·html5
engchina1 小时前
详解CSS `clear` 属性及其各个选项
前端·css·css3
云缘若仙2 小时前
directx12 3d+vs2022游戏开发第三章 笔记五 变换
笔记·3d
m0_zj3 小时前
17.[前端开发]Day17-形变-动画-vertical-align
前端·css·chrome·html·html5