3D-旋转六面体代码：
<style>
* { margin: 0; padding: 0; }
* body{
* /*给父元素添加透视效果*/
* perspective: 500px;
* }
* ul {
* width: 200px;
* height: 200px;
* /* border: 1px solid black;*/
* /* box-sizing: border-box; */
* margin: 100px auto;
* position: relative;
* transform-style: preserve-3d;
* transform: rotateX(0deg) rotateY(0deg);
* animation: sport 10s linear infinite 0s normal;
* }
* ul li {
* list-style: none;
* width: 200px;
* height: 200px;
* text-align: center;
* line-height:200px;
position: absolute;
top:0;
left:0;
}
@keyframes sport {
from {
transform: rotateX(0deg);
}
to {
transform: rotateX(360deg);
}
}
ul li:nth-child(1) {
background:red;
transform: rotateX(90deg) translateZ(100px);
/*scale(2,1);可以将正方形变成长方形*/
}
ul li:nth-child(2){
background:purple;
transform: rotateX(180deg) translateZ(100px);
/*scale(2,1);可以将正方形变成长方形*/
}
ul li:nth-child(3){
background:blue;
transform: rotateX(270deg) translateZ(100px);
/*scale(2,1);可以将正方形变成长方形*/
}
ul li:nth-child(4){
background:green;
transform: rotateX(360deg) translateZ(100px);
/*scale(2,1);可以将正方形变成长方形*/
}
ul li:nth-child(5){
background:orangered;
transform: translateX(-100px) rotateY(90deg);
/*translateX(-200px) 才可以拼成长方体效果*/
}
ul li:nth-child(6){
background:palevioletred;
transform: translateX(100px) rotateY(90deg);
/*translateX(-200px) 才可以拼成长方体效果*/
}
</style>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul
</body>
718
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
