这篇博客详细介绍了如何使用CSS3的transform属性和perspective属性创建一个3D开门动画效果。通过设置不同的transform-origin和transition属性，使得鼠标悬停在section元素上时，左右两扇门能够平滑地翻转，营造出真实的开门视觉体验。背景图片和边框细节增强了动画的真实感。
section {
width: 440px;
height: 300px;
border: 1px solid #000;
margin: 100px auto;
background: url(image/timg.jpg) no-repeat;
position: relative;
perspective: 1000px; /*2D变3D 给父盒子添加透视效果*/
background-size: cover;
}
.door-l,.door-r {
position: absolute;
top: 0;
width: 50%;
height: 100%;
background: url(image/f.jpg);
transition: all 1s; /*两个门都做过渡*/
}
.door-l {
left: 0;
border-right: 1px solid #000;
transform-origin: left; /*设置旋转中心点 左侧盒子按左侧翻转*/
}
.door-r {
right: 0;
border-left: 1px solid #000;
transform-origin: right;
}
.door-l::before,
.door-r::before {
content: "";
position: absolute;
top: 50%;
width: 20px;
height: 20px;
border: 1px solid #000;
border-radius: 50%;
transform: translateY(-50%); /*走自己高度的一半*/
}
.door-l::before {
right: 5px;
}
.door-r::before {
left: 5px;
}
/*鼠标经过section盒子 两个门 盒子翻转 rotateY*/
section:hover .door-l {
transform: rotateY(-130deg);
}
section:hover .door-r {
transform: rotateY(130deg);
}
一键复制
编辑
Web IDE
原始数据
按行查看
历史
扫一扫
819
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
