HTMLCSS：3D 旋转卡片的炫酷动画

devtools/2024/11/6 12:10:51/

效果演示

这段代码是一个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轴上旋转。