html5炉石传说3d相册,HTML5 可拖曳炉石传说3D卡片

最新推荐文章于 2025-03-02 17:01:29 发布

公周

最新推荐文章于 2025-03-02 17:01:29 发布

阅读量187

点赞数

文章标签： html5炉石传说3d相册

这段代码展示了如何使用CSS3的@keyframes和transform属性创建一个3D翻转效果的卡片动画。卡片包括背景图片、标签和令牌元素，通过不同的translateZ值实现了深度感和层次感。该效果适用于前端开发中的动态展示和交互设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS

语言：

CSSSCSS

确定

@-webkit-keyframes rotate {

0% {

-webkit-transform: rotateY(-55deg) rotateZ(5deg);

transform: rotateY(-55deg) rotateZ(5deg); }

50% {

-webkit-transform: rotateY(0deg) rotateZ(0deg);

transform: rotateY(0deg) rotateZ(0deg); }

100% {

-webkit-transform: rotateY(55deg) rotateZ(-5deg);

transform: rotateY(55deg) rotateZ(-5deg); } }

@keyframes rotate {

0% {

-webkit-transform: rotateY(-55deg) rotateZ(5deg);

transform: rotateY(-55deg) rotateZ(5deg); }

50% {

-webkit-transform: rotateY(0deg) rotateZ(0deg);

transform: rotateY(0deg) rotateZ(0deg); }

100% {

-webkit-transform: rotateY(55deg) rotateZ(-5deg);

transform: rotateY(55deg) rotateZ(-5deg); } }

[am-card], [am-token], [am-label] {

-webkit-perspective: 700px;

perspective: 700px;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d; }

[am-card] {

position: absolute;

top: 50px;

left: 200px;

background: url("http://f.cl.ly/items/3r2M0e011K3B3F371h0m/card-sprite.png");

background-position: -225px;

width: 246px;

height: 385px;

position: relative;

z-index: 1; }

[am-card]:before {

position: absolute;

left: 20px;

z-index: 0;

content: "";

width: 220px;

background: url("http://f.cl.ly/items/3r2M0e011K3B3F371h0m/card-sprite.png");

background-position: 0px;

display: block;

height: 385px;

-webkit-transform: translateZ(-5px);

transform: translateZ(-5px); }

[am-card] [am-label] {

position: absolute;

display: block;

left: 7px;

top: 160px;

z-index: 2;

content: "";

width: 230px;

background: url("http://f.cl.ly/items/3r2M0e011K3B3F371h0m/card-sprite.png") no-repeat;

background-position: -485px -160px;

height: 75px; }

[am-card] [am-token] {

position: absolute;

left: -7px;

text-indent: -999999px;

width: 400px;

height: 65px;

background: url("http://f.cl.ly/items/3r2M0e011K3B3F371h0m/card-sprite.png") no-repeat;

background-position: -485px 0px; }

[am-card] [am-token]:nth-child(1) {

-webkit-transform: translateZ(1px);

transform: translateZ(1px); }

[am-card] [am-token]:nth-child(2) {

-webkit-transform: translateZ(2px);

transform: translateZ(2px); }

[am-card] [am-token]:nth-child(3) {

-webkit-transform: translateZ(3px);

transform: translateZ(3px); }

[am-card] [am-token]:nth-child(4) {

-webkit-transform: translateZ(4px);

transform: translateZ(4px); }

[am-card] [am-token]:nth-child(5) {

-webkit-transform: translateZ(5px);

transform: translateZ(5px); }

[am-card] [am-label]:nth-child(6) {

-webkit-transform: translateZ(1px);

transform: translateZ(1px); }

[am-card] [am-label]:nth-child(7) {

-webkit-transform: translateZ(2px);

transform: translateZ(2px); }

[am-card] [am-label]:nth-child(8) {

-webkit-transform: translateZ(3px);

transform: translateZ(3px); }

[am-card] [am-label]:nth-child(9) {

-webkit-transform: translateZ(4px);

transform: translateZ(4px); }

[am-card] [am-label]:nth-child(10) {

-webkit-transform: translateZ(6px);

transform: translateZ(6px); }