html css 魔方,css3实现立体魔方效果
div.box {
width: 300px;
height: 300px;
margin: 100px auto;
position: relative;
transform-style: preserve-3d;
animation: rotate 5s linear infinite alternate;
}
div.box:hover{
animation-play-state: paused;
}
@keyframes rotate{
0%{
transform: rotateX(0) rotateY(0) rotateZ(0);
}
50%{
transform: rotateX(30deg) rotateY(34deg) rotateZ(50deg);
}
100%{
transform: rotateX(60deg) rotateY(90deg) rotateZ(135deg);
}
}
div.face {
width: 300px;
height: 300px;
position: absolute;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
}
div.item {
width: 90px;
height: 90px;
border-radius: 10px;
text-align: center;
line-height: 90px;
}
.top .item {
background: red;
}
.top {
transform: rotateX(-90deg) translateZ(150px);
}
.bottom .item {
background: skyblue;
}
.bottom {
transform: rotateX(90deg) translateZ(150px);
}
.left .item {
background: chocolate;
}
.left {
transform: rotateY(90deg) translateZ(150px);
}
.right .item {
background: blue;
}
.right {
transform: rotateY(-90deg) translateZ(150px);
}
.front .item {
background: deepskyblue;
}
.front {
transform: translateZ(150px)
}
.back .item {
background: yellowgreen;
}
.back {
transform: translateZ(-150px) rotateY(-180deg);
}
123456789123456789123456789123456789123456789123456789總結
以上是生活随笔為你收集整理的html css 魔方,css3实现立体魔方效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mysql字段是否存在_Mysql判断表
- 下一篇： 计算机科学与应用考研题,2015年中科院