这是一款使用纯CSS3制作的鼠标hover图片3D透视动画效果。该透视动画使用transform来完成炫酷的hover效果。
使用方法
在页面中引入style.css文件。
HTML结构
该鼠标hover图片3D透视动画效果的基本HTML结构如下:
CSS样式
实现该特效的CSS代码非常简单,如下:
body .blocks {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
body .blocks .block {
position: relative;
display: block;
width: 200px;
height: 200px;
margin: 20px;
-webkit-transform: perspective(600px) rotateY(-30deg);
transform: perspective(600px) rotateY(-30deg);
-webkit-transition: -webkit-transform .3s;
transition: -webkit-transform .3s;
transition: transform .3s;
transition: transform .3s, -webkit-transform .3s;
}
body .blocks .block img {
width: auto;
max-width: 100%;
}
body .blocks .block .overlay {
position: fixed;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
-webkit-transition: opacity .3s ease;
transition: opacity .3s ease;
}
body .blocks .block .overlay img {
width: auto;
max-width: 50%;
}
body .blocks .block.hover, body .blocks .block:hover {
-webkit-transform: rotateY(0);
transform: rotateY(0);
cursor: pointer;
}
body .blocks .block.hover .overlay, body .blocks .block:hover .overlay {
opacity: 1;
}