这篇博客详细介绍了如何使用CSS3来创建一个3D旋转的魔方效果。通过设置`transform-style: preserve-3d`属性和关键帧动画`@keyframes rotate`，实现了魔方各个面的旋转动画。当鼠标悬停时，动画暂停，为读者提供了交互体验。博客内容涉及到前端开发中的CSS3 3D变换和动画技术。
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);
}
540
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
