H5+CSS3玩转骰子

最新推荐文章于 2021-06-07 13:37:49 发布

程序猿里我是最帅的

最新推荐文章于 2021-06-07 13:37:49 发布

阅读量2.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： H5+CSS3 文章标签： css3 H5

本文链接：https://blog.youkuaiyun.com/zhangfan_12871/article/details/77351628

H5+CSS3 专栏收录该内容

3 篇文章

订阅专栏

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>骰子</title>
<style type="text/css">
ul {
margin: 200px;
width: 200px;
height: 200px;
/*border: 2px solid black;*/
transform-style: preserve-3d;
animation: aaa 5s infinite;
}

li {
position: absolute;
height: 100px;
width: 100px;
/*border: solid 1px red;*/
list-style: none;
text-align: center;
line-height: 100px;
font-size: 2em;
color: white;
opacity: 0.5;
}

li:nth-of-type(1) {
background: red;
}

li:nth-of-type(2) {
background: yellow;
transform: rotateX(-90deg);
transform-origin: top;
}

li:nth-of-type(3) {
background: green;
transform: rotateY(90deg);
transform-origin: left;
}

li:nth-of-type(4) {
background: blue;
transform: rotateY(-90deg);
transform-origin: right;
}

li:nth-of-type(5) {
background: purple;
transform: rotateX(90deg);
transform-origin: bottom;
}

li:nth-of-type(6) {
background: orangered;
transform: translateZ(-100px);
}

@keyframes aaa {
0% {
transform: rotateX(0deg) rotateY(0deg);
}
100% {
transform: rotateX( 360deg) rotateY(360deg);
}
</style>
</head>

<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>

</html>