本文介绍了一段CSS3代码，用于创建3D旋转和变换效果。通过设置不同的视角、旋转角度和变换，实现了在鼠标悬停时元素的立体翻转和移动。适合前端开发者了解和学习CSS3的高级特性。
*{
margin:0px;
padding:0px;
}
body{
perspective: 500px;
/* background-image: url(img/1.png); */
background-repeat: no-repeat;
-webkit-background-size:cover;
background-size:cover;
}
.box{
width:200px;
margin: 200px auto;
position: relative;
transform-style: preserve-3d;
transform: rotateX(-30deg) rotateY(30deg);
animation: b 30s infinite;
}
@keyframes b{
100%{transform: rotateX(-30deg) rotateY(720deg);}
}
.box:hover .up{
transform: rotateX(90deg) translateZ(200px);
}
.box:hover .down{
transform: rotateX(-90deg) translateZ(200px);
}
.box:hover .left{
transform: rotateY(-90deg) translateZ(200px);
}
.box:hover .right{
transform: rotateY(90deg) translateZ(200px);
}
.box:hover .front{
transform: translateZ(200px);
}
.box:hover .back{
transform: translateZ(-200px);
}
.box div{
width:200px;
height:200px;
font-size: 60px;
text-align: center;
position: absolute;
line-height: 200px;
transition: all 3s;
color:white;
}
.up{
background-color: red;
transform: rotateX(90deg) translateZ(100px);
}
.down{
background-color: green;
transform: rotateX(-90deg) translateZ(100px);
}
.left{
background-color: blue;
transform: rotateY(-90deg) translateZ(100px);
}
.right{
background-color: purple;
transform: rotateY(90deg) translateZ(100px);
}
.front{
background-color: orange;
transform: translateZ(100px);
}
.back{
background-color: orange;
transform: translateZ(-100px);
}
.heart{
animation: a 10s infinite;
}
@keyframes a{
to{transform: rotateY(3600deg);}
}
一键复制
编辑
Web IDE
原始数据
按行查看
历史
扫一扫
988
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
