小案例 html+css 实现3D旋转动画
【摘要】 <!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style>*{margin:0;padding:0;}body{background: black;}div{ width:400px; height:400px; border:1px solid pink; perspe...
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{margin:0;padding:0;}
body{background: black;}
div{
width:400px;
height:400px;
border:1px solid pink;
perspective:500px;
perspective-origin: top;
}
ul{
position: relative;
transform-style: preserve-3d;
margin:150px;
}
li{position:absolute;
width:100px;
height:100px;
background:pink;
opacity:0.3;}
ul li:nth-child(2n){background: yellow;}
ul li:nth-child(1){
transform:translateZ(200px);
}
ul li:nth-child(12){
transform:translateZ(-200px);
}
ul li:nth-child(2){
transform:rotateY(90deg)translateZ(200px);
}
ul li:nth-child(11){
transform:rotateY(-90deg)translateZ(200px);
}
ul li:nth-child(3){
transform:rotateY(30deg)translateZ(200px);
}
ul li:nth-child(10){
transform:rotateY(-150deg)translateZ(200px);
}
ul li:nth-child(4){
transform:rotateY(60deg)translateZ(200px);
}
ul li:nth-child(9){
transform:rotateY(-120deg)translateZ(200px);
}
ul li:nth-child(5){
transform:rotateY(120deg)translateZ(200px);
}
ul li:nth-child(8){
transform:rotateY(-60deg)translateZ(200px);
}
ul li:nth-child(6){
transform:rotateY(150deg)translateZ(200px);
}
ul li:nth-child(7){
transform:rotateY(-30deg)translateZ(200px);
}
</style>
</head>
<body>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
</div>
</body>
</html>
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）