要点：将容器看成在圆心，然后就是旋转。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0px;padding:0px;}
#container{width:1000px;height:200px;margin:100px auto;border:1px solid red;perspective:1000px;}
#container .con{width:200px;height:100px;position:relative;margin:20px auto;transform-style:preserve-3d;animation:myfirst 5s linear infinite;}
#container .con p{width:200px;height:100px;position:absolute;background:red;color:white;font-size:40px; margin:20px auto;
font-weight:bold;font-family:"微软雅黑";text-align:center;line-height:100px;opacity:0.5;}
#container .con p:nth-child(1){transform:rotateY(0deg) translateZ(250px);background:#E03F3F;}
#container .con p:nth-child(2){transform:rotateY(45deg) translateZ(250px);background:#1FD0EB;}
#container .con p:nth-child(3){transform:rotateY(90deg) translateZ(250px);background:#8A14E4;}
#container .con p:nth-child(4){transform:rotateY(135deg) translateZ(250px);background:#17DA3A;}
#container .con p:nth-child(5){transform:rotateY(180deg) translateZ(250px);background:red;}
#container .con p:nth-child(6){transform:rotateY(225deg) translateZ(250px);background:red;}
#container .con p:nth-child(7){transform:rotateY(270deg) translateZ(250px);background:#241CEA;}
#container .con p:nth-child(8){transform:rotateY(315deg) translateZ(250px);background:gray;}
#container .con{transform:translateZ(-250px);}
@keyframes myfirst{
from{transform:rotateY(0deg);}
to{transform:rotateY(360deg);}
}
</style>
</head>
<body>
<div id = "container">
<div class = "con">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
</div>
</div>
</body>
</html>
2135
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
