【CSS】我使用css3的3D变换制作了一个盒子,当我进入盒子的时候出现了闪烁的问题,请问怎么解决啊?

html代码如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<title>3D</title>

<link rel="stylesheet" type="text/css" href="./3D.css"/>

</head>

<body>

<div class="wrap">

<div class="box">

<div class="zq">朱雀</div>

<div class="xw">玄武</div>

<div class="ql">青龙</div>

<div class="bh">白虎</div>

<div class="yql">麒麟</div>

<div class="ts">腾蛇</div>

</div>

<div>

</body>

</html>

css代码如下:

html,body,div{

margin:0;

padding:0;

}

.wrap{

width:200px;

height:200px;

margin:600px auto 0 auto;

perspective:500px;

-webkit-perspective:500px;

perspective-origin:50% 50%;

-webkit-perspective-origin:50% 50%;

}

.box{

position:relative;

width:200px;

height:200px;

transform:rotateX(0deg)translateZ(400px);

-webkit-transform:rotateX(0deg)translateZ(400px);

transform-style:preserve-3d;

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

}

.box div{

position:absolute;

width:200px;

height:200px;

line-height:200px;

text-align:center;

border:1px solid black;

}

.zq{

transform:translateZ(-100px)rotateY(180deg);

-webkit-transform:translateZ(-100px)rotateY(180deg);

}

.xw{

transform:translateZ(100px);

-webkit-transform:translateZ(100px);

}

.ql{

transform:rotateY(-90deg)translateZ(100px);

-webkit-transform:rotateY(-90deg)translateZ(100px);

}

.bh{

transform:rotateY(90deg)translateZ(100px);

-webkit-transform:rotateY(90deg)translateZ(100px);

}

.yql{

transform:rotateX(90deg)translateZ(100px);

-webkit-transform:rotateX(90deg)translateZ(100px);

}

.ts{

transform:rotateX(-90deg)translateZ(100px);

-webkit-transform:rotateX(-90deg)translateZ(100px);

}

@keyframes spin{

from{transform:translateZ(400px)rotateY(0deg);}

to{transform:translateZ(400px)rotateY(360deg);}

}

@-webkit-keyframes spin{

from{-webkit-transform:translateZ(400px)rotateY(0deg);}

to{-webkit-transform:translateZ(400px)rotateY(360deg);}

}

.box{

animation:spin 5s infinite linear;

-webkit-animation:spin 5s infinite linear;

}

预览图大致如下:
图片描述

请问怎么解决这个问题啊?

回答:

其实不是闪烁的问题,只是这里translateZ(400px)太小了而已
@keyframes spin{

from{transform:translateZ(400px)rotateY(0deg);}

to{transform:translateZ(400px)rotateY(360deg);}

}
@-webkit-keyframes spin{

from{-webkit-transform:translateZ(400px)rotateY(0deg);}

to{-webkit-transform:translateZ(400px)rotateY(360deg);}

}
改成:
@keyframes spin{

from{transform:translateZ(420px)rotateY(0deg);}

to{transform:translateZ(420px)rotateY(360deg);}

}
@-webkit-keyframes spin{

from{-webkit-transform:translateZ(420px)rotateY(0deg);}

to{-webkit-transform:translateZ(420px)rotateY(360deg);}

}

以上是 【CSS】我使用css3的3D变换制作了一个盒子,当我进入盒子的时候出现了闪烁的问题,请问怎么解决啊? 的全部内容, 来源链接: utcz.com/a/153988.html

回到顶部