标签归档:HTML5 3D

HTML5/CSS3 3D木块旋转动画

今天我们要来分享一款迷人的HTML5/CSS3 3D旋转动画,这款3D动画的主角是一根根小木条,每根小木条都会旋转,小木条之间的旋转有一定的间隔,这样就会有一种螺旋的视觉效果。另外,和之前分享的HTML5 3D动画一样,也是利用了CSS3的transform属性,点击这里可以查看更多HTML5 3D特效

css3-3d-spinning-planks

在线演示源码下载

纯CSS3 3D图片翻转展示 图片3D阴影效果

之前我们分享过一些HTML5图片3D效果,这篇文章分享10款效果惊艳的HTML5图片特效中我们可以看到很多3D的图片特效。今天我们再来分享一款利用纯CSS3实现的3D图片翻转展示特效,点击图片或者下方的翻页按钮即可选中相应的图片,并实现翻转展示效果。

css3-3d-image-coverflow

在线演示源码下载

HTML5 3D实景地图动画 3D效果很酷

利用HTML5来实现3D的效果真的非常酷,也比较简单,我们可以来回顾一下之前介绍的一些HTML5 3D动画效果。今天我们来分享一款全新的HTML5 3D效果,是一款3D实景地图,这款3D地图截取了实景的房屋大厦,并且可以旋转展示,非常酷。

html5-3d-real-map

在线演示源码下载

HTML5/CSS3书本翻页3D动画

前段时间我们分享过很多牛叉的HTML5动画,如果你对HTML5感兴趣,可以移步至HTML5动画欣赏学习。今天我们要分享一款基于HTML5和CSS3的书本翻页3D动画,当我们将鼠标滑过书本时,书本就会自动一页页翻过去,书本的3D效果非常不错。

html5-css3-book

在线演示源码下载

纯CSS3实现的3D小盒子动画 可自定义旋转角度

为了能更好的演示HTML5的3D特性,我们往往会利用简单的小盒子来做3D实验,今天分享的这款HTML5动画就展现了3D小盒子动画,我们可以通过滑动鼠标来翻转小盒子预览盒子的各个面,也可以点击按钮自定义盒子翻转的角度。这款3D小盒子动画是利用纯CSS3实现的,效果很不错。

css3-3d-box-rotate

在线演示源码下载

HTML5 3D正方体旋转动画 很酷的3D特效

之前我们分享过很多非常不错的HTML5 3D立体动画特效,尤其是一些HTML5 Canvas动画,更是酷得让人惊叹。今天我们又要来分享一款好玩的HTML5 3D效果,该特效是一个可以旋转播放的正方体,你可以从多个视角来查看正方体,非常不错的3D效果。

html5-3d-cube-image

在线演示源码下载

HTML5 3D骨牌图片特效 带文字描述

今天分享一款很特别的HTML5 3D图片特效,当鼠标滑过图片时,平面的图片即会呈现3D的效果,和这款HTML5 3D图片折叠特效类似,也是通过鼠标滑过来展现3D效果。另外,这款HTML5 3D骨牌图片特效还可以设置图片描述信息。

html5-3d-domino-image

在线演示源码下载

HTML5 3D图片折叠特效 超炫酷图片特效

我们之前介绍过很多HTML5 3D图片效果,比如HTML5/CSS3 3D环形图片墙HTML5 3D相册浏览等等。今天我们再来分享一款HTML5 3D图片折叠特效,鼠标滑过图片时,折叠好的图片便会展开,鼠标离开图片时,图片又会折叠起来,效果非常酷。

html5-3d-fold-image

在线演示源码下载

HTML5 3D旋转图片相册 可鼠标悬停

图片特效在HTML5应用中十分广泛,我们也在html5tricks上收集了不少HTML5图片特效,今天要分享的这款HTML5 3D旋转图片相册又非常绚丽,和之前分享的这款HTML5/CSS3 3D环形图片墙类似,也是一面立体的图片墙,图片不停的切换,鼠标滑过图片时即可激活图片查看。

html5-3d-images-gallery

在线演示源码下载

HTML5/CSS3 3D环形图片墙 伴随旋转动画

我们分享过很多HTML5图片特效,包括HTML5图片播放、HTML5图片缩放等效果。今天我们要分享一款基于HTML5/CSS3的3D环形图片墙,该HTML5图片特效是一面3D立体的墙,墙上贴着一些图片,墙体在不停的旋转移动。鼠标滑过图片时,图片墙即停止转动,并将选中的图片放大。

html5-css3-3d-photo-slider

在线演示源码下载