html5 鼠标旋转动画效果,CSS3鼠标滑过图片3D翻转动画特效

这是一款效果非常炫酷的CSS3鼠标滑过图片3D翻转动画特效。该特效基于Bootstrap网格系统来布局，通过简单的CSS3代码，在鼠标滑过图片时对图片进行3D翻转，效果非常的酷。

使用方法

HTML结构

该特效使用Bootstrap网格系统来布局。

Williamson

...

......

CSS样式

每张图片的包裹元素.box使用perspective属性来制作3D透视空间。它里面的图片默认沿Y轴旋转0度，并为所有的动画设置0.5秒的ease-in-out过渡效果。

.box{

position: relative;

perspective: 1000px;

}

.box .box-img{

transform: rotateY(0);

transition: all 0.50s ease-in-out 0s;

}

鼠标滑过图片时，图片沿Y轴旋转-90度。

.box:hover .box-img{

transform: rotateY(-90deg);

}

.box-content是黑色的内容显示层。它使用绝对定位，宽度和高度和它的父容器相同。同样为所有的动画执行0.5秒的ease-in-out过渡效果。它默认情况下沿Y轴旋转了90度。

.box .box-content{

width: 100%;

height: 100%;

position: absolute;

top: 0;

left: 0;

padding: 60px 20px;

text-align: center;

background: rgba(0,0,0,0.7);

transform: rotateY(90deg);

transition: all 0.50s ease-in-out 0s;

}

在鼠标滑过时，.box-content沿Y轴旋转回0度。这样图片和内容层形成交叉旋转的效果。

.box:hover .box-content{

transform: rotateY(0);

}

完整的CSS代码请参考下载文件。

html5 鼠标旋转动画效果,CSS3鼠标滑过图片3D翻转动画特效相关推荐

Flutter：手把手教你实现一个仿 Flipboard 图片3D翻转动画
思路参考自: 扔物线整体效果话不多少,直接上效果通过观察可以发现这个动画分为三个过程过程一: 底部翘起来过程二: 转起来过程三:右边翘起来三维图像投影到二维平面图片绕着 x 轴旋转,左 ...
html5鼠标滑过图片图片弹出层,纯CSS3鼠标滑过图片遮罩层动画特效
简要教程这是一款使用纯CSS3制作的鼠标滑过图片遮罩层动画特效.该特效中,当鼠标滑过或悬停在图片上面时,会在图片上出现遮罩层动画,展示出图片的描述信息和链接图标按钮. 使用方法在页面中引入boot ...
css鼠标移入线条延中心伸长,css动画效果：鼠标移上去底部线条从中间往两边延伸 - 子成君-分享出去，快乐加倍！-旧版已停更...
本站已不再更新,最新资源请前往zcjun.com获取! css: .top-nav a:after { content: ' '; position: absolute; z-index: 2; bo ...
css动画效果：鼠标移上去底部线条从中间往四周动画延伸
css动画效果:鼠标移上去底部线条从中间往四周动画延伸如图: .top-nav a:after {content: ' ';position: absolute;z-index: 2;bottom: ...
php 3d animation,CSS_纯CSS实现菜单、导航栏的3D翻转动画效果，我曾经向大家展示过闪光的logo - phpStudy...
纯CSS实现菜单.导航栏的3D翻转动画效果我曾经向大家展示过闪光的logo,燃烧的火狐狸,多重嵌套动画等例子,今天,我们将要制作一个简单但非常酷的3D翻转菜单.大家可以先看看实际效果,下面有效果截图 ...
CSS3之图片3D翻转效果(网页效果--每日一更)
今天,带来的是纯CSS3的效果--图片3D翻转. 请看效果:亲,请点击这里这个效果主要还是运用了CSS3的transform变形属性,与上个效果不同的是,这次并不是动画,所以没有采用animatio ...
CSS animation动画效果实现精灵图、雪碧图动画，多动画应用
CSS animation动画效果实现精灵图.雪碧图动画,多动画应用素材下载分析图片动画过程图片可以分成4*6=24 小图片也就是24帧方法1 可以把每一行成一个动画,所以可以拆分4个动画方 ...
Android 登录3D翻转动画效果
Android 登录3D翻转动画效果描述:这是一个登录3D翻转效果的Demo. 项目代码在最后面!!!!跳转到最后控件效果如下: 实现功能: 使页面进行3D翻转(3D翻转效果) 可通过回调监听两 ...
flash图片如何镜像翻转_在canvas上实现元素图片镜像翻转动画效果的方法
这篇文章主要介绍了在canvas上实现元素图片镜像翻转动画效果的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧! 一.Canvas图片水平镜像翻转效果预览 ...

html5 鼠标旋转动画效果,CSS3鼠标滑过图片3D翻转动画特效

Williamson

html5 鼠标旋转动画效果,CSS3鼠标滑过图片3D翻转动画特效相关推荐

最新文章

热门文章