html页面显示透视效果图,纯CSS3鼠标hover图片3D透视效果

这是一款使用纯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;

}