HTML5 3D旋转动画案例

效果

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.container{width: 200px;height: 200px;position: relative;margin:50px auto;transform: rotateY(15deg) rotateX(-15deg);transform-style: preserve-3d;animation:xuanzhuan 8s linear infinite;}@keyframes xuanzhuan{0%{transform: rotateY(15deg) rotateX(45deg);}50%{transform: rotateY(375deg) rotateX(-45deg);}100%{transform: rotateY(735deg) rotateX(45deg);}}.container:hover{animation-play-state: paused;}.container div.front{background: red;transform: translateZ(100px);}.container div.back{background: green;transform: translateZ(-100px) rotateY(180deg);}.container div.left{background: blue;transform:translateX(-100px) rotateY(-90deg);}.container div.right{background: yellow;transform:translateX(100px) rotateY(90deg);}.container div.top{background: pink;transform:translateY(-100px) rotateX(90deg);}.container div.bottom{background: orange;transform:translateY(100px) rotateX(-90deg);}.container div{position: absolute;left:0;top:0;width: 200px;height: 200px;line-height: 200px;text-align: center;font-size: 40px;}</style>
</head>
<body><div class="container"><div class="front">front</div><div class="back">back</div><div class="left">left</div><div class="right">right</div><div class="top">top</div><div class="bottom">bottom</div></div>
</body>
</html>

HTML5 3D旋转动画案例相关推荐

HTML5 3D旋转图片相册
H5旋转3D相册,鼠标放置暂停,图片灰度级为0,有放大效果. 该实例运用H5和CSS3动画效果,未用javascript.提高了本人对CSS3 新属性的了解及掌握. 完整代码如下: <!DOCT ...
HTML5 3D爱心动画及其制作过程
之前有看到过很多基于HTML5或者CSS3制作的爱心动画,不过基本上都是2D平面的,今天在国外的网站上看到一个基于HTML5 3D的爱心动画,对于HTML5爱好者来说,不免兴奋了一把.下面将分享一下这 ...
html5 鼠标旋转动画效果,CSS3鼠标滑过图片3D翻转动画特效
这是一款效果非常炫酷的CSS3鼠标滑过图片3D翻转动画特效.该特效基于Bootstrap网格系统来布局,通过简单的CSS3代码,在鼠标滑过图片时对图片进行3D翻转,效果非常的酷. 使用方法 HTML结 ...
好看的照片效果html,9款超绚丽的HTML5 3D图片动画特效
1.SVG玫瑰花盛开动画 SVG还是很强大的,我们之前也分享过很多利用SVG绘制出来的各种动画特效.比如超炫酷的SVG轮船行驶动画和HTML5 SVG圆形钢琴动画都是用SVG实现的超酷动画.今天我们要 ...
html5把六张图片做成立方体,html5 3D旋转的图片立方体代码
特效描述:html53D 旋转的图片立方体.html5 css3转换属性创建3D旋转立方体多维数据图片库代码. 代码结构 1. HTML代码单击下面的图片来旋转立方体. //DOM load eve ...
Android做3D旋转动画,Android编程实现3D旋转效果实例
本文实例讲述了Android编程实现3D旋转效果的方法.分享给大家供大家参考,具体如下: 下面的示例是在Android中实现图片3D旋转的效果. 实现3D效果一般使用OpenGL,但在Android平 ...
JavaScript、Vue实现大数据大屏展示3D旋转动画效果
效果最近在写一些数据大屏的时候客户需要做个3D旋转动效的效果,简单整理之后写了一个小demo做下记录,先看一下效果: 当点击next的时候,整个模块旋转切换到下个菜单,点击prev的时候也可以切换到 ...
8款超酷的HTML5 3D图片动画源码
1.HTML5移动端图片左右切换动画今天要给大家分享一款很不错的图片左右切换焦点图动画,并且支持移动端触摸滑动.功能上,这款HTML5图片播放器支持鼠标滑动.手机端触摸滑动以及自动播放.外观上,这款 ...
HTML——3D旋转+动画旋转木马案例
旋转木马案例效果外面的图片围绕中间的图片旋转,鼠标悬停停止旋转. 思路不用鼠标悬停就能实现旋转需要用到动画来实现,@keyframes内设置transform: rotateY();当鼠标悬停时 ...

HTML5 3D旋转动画案例

HTML5 3D旋转动画案例相关推荐

最新文章

热门文章