html3d翻转效果,3d翻转效果.html

Document

body {

perspective: 500px;

}

.box {

position: relative;

margin: 100px auto;

width: 300px;

height: 300px;

transition: all 2s;

transform-style: preserve-3d;

animation: move 2s linear infinite;

}

.box div {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

line-height: 300px;

text-align: center;

font-size: 20px;

border-radius: 50%;

}

.box div:first-child {

background-color: red;

z-index: 1;

}

.box div:last-child {

background-color: yellow;

transform: rotateY(180deg);

}

@keyframes move {

0% {}

100% {

transform: rotateY(360deg);

}

}

村长，有人偷瓜

网恋嘛，我超甜

一键复制

编辑

Web IDE

原始数据

按行查看

历史