3D正方体旋转，当点击正方体时，正方体停止旋转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>正方体</title>
<style>
*{
margin: 0;
padding: 0;
}
.wrapper{
/* width: 200px;
height: 200px;*/
margin-left: 200px;
margin-top: 200px;
position: relative;
perspective: 1600px; /*景深*/
}
@keyframes wang{
100% {
transform:rotateY(360deg) rotateX(360deg);
}
}
.content{
animation: wang 6s ease-in-out infinite;
color: #fff;
text-align: center;
line-height: 200px;
font-size: 80px;
height: 200px;
width: 200px;
position: relative;
transform-style: preserve-3d; /*使子元素成3D显示*/
/*background: #000;*/
}
.content:hover{
animation-play-state: paused; /*鼠标移入暂停动画*/
}
.box{
opacity: 0.7;
position: absolute;
width: 200px;
height: 200px;
}
.before{
transform: translat
最低0.47元/天 解锁文章
5175
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
