CSS3 3D旋转动画代码实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{margin:0;
padding:0;}
.wrapper1{
width:150px;
height:191px;
border:#eee 1px solid;
border-radius:10px;
padding:2px;
float:left;
margin:200px 0 0 50px;
-moz-perspective:800px;
-moz-transform-style:preserve-3d;
-webkit-perspective:800px;
-webkit-transform-style:preserve-3d;
-moz-backface-visibility:;
-webkit-backface-visibility:hidden;
}
.box1{
width:150px;
height:191px;
background:url(http://p1.qhimg.com/t0151320b1d0fc50be8.png);
border-radius:10px;
-webkit-animation-name:wobble;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: ;
-moz-animation-name:wobble;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 0;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: ;
}
@-webkit-keyframes wobble{
0% {
-webkit-transform:rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
}
25% {
-webkit-transform:rotateY(90deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
}
50% {
-webkit-transform:rotateY(180deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
}
75% {
-webkit-transform:rotateY(90deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
-webkit-transform:rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
}
}
@-moz-keyframes wobble{
0% {
-moz-transform:rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
}
25% {
-moz-transform:rotateY(90deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
}
50% {
-moz-transform:rotateY(180deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
}
75% {
-moz-transform:rotateY(90deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
-moz-transform:rotateY(0eg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
}
}
</style>
</head>
<body>
<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>
<div class="wrapper1">
<div class="box1"></div>
</div>
</body>
</html>
CSS3 3D旋转动画代码实例的更多相关文章
- Css3 3D 旋转动画效果
需求: 1.一个列表滑动效果为360 旋转 准备: 1.css 基础 2.Css 动画基础animation 3.transform-style概念 4 transform 概念 5 JavaScri ...
- css3 3d旋转动画
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- CSS3 3D旋转动画菜单
在线演示 本地下载
- CSS3 3D旋转下拉菜单--兼容性不太好
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- CSS3——3D旋转图（跑马灯效果图）
CSS3新增了很多新的属性,可以用很少的代码实现炫酷的动画效果,但由于兼容性各浏览器的能力存在不足,有特别需求的网站就呵呵啦.H5C3已是大势所趋了,之前看过一个新闻,Chrome将在年底全面转向H5 ...
- css3制作旋转动画
现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...
- 3D旋转动画
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> < ...
- 8套迷人精致的CSS3 3D按钮动画
1.纯CSS3 3D按钮 按钮酷似牛奶般剔透 CSS3按钮一般都可以设计的非常漂亮,利用投影.渐变等CSS3属性特效可以把按钮渲染的十分动感.今天分享的这款CSS3按钮外观非常特别,它看上去酷似晶莹剔 ...
- CSS3鼠标滑过图片3D旋转动画
在线演示 本地下载
随机推荐
- 【Demo 0009】Java基础-异常
本章学习要点: 1. 了解异常的基本概念: 2. 掌握异常捕获方法以及注意事项; 3. 掌握异常抛出方法: 4. 掌握自定义异常类和异常类继承注 ...
- UVA 839 (13.08.20)
Not so Mobile Before being an ubiquous communications gadget, a mobile wasjust a structure made of ...
- C 函数 strstr 的高效实现
C函数库中有一个函数 strstr(char*, char*),它实现的是在一个原字符串中查找一个子串.假设找到这种一个子串,返回这个子串在原字符串中的起始位置,若没有找到这种一个子串.则 ...
- Swift代码实现加载WEBVIEW
let webview = UIWebView(frame:self.view.bounds) webview.bounds=self.view.bounds //远程网页 webview.loadR ...
- REPLACE...IN.....WITH.... 的使用
REPLACE...IN.....WITH.... 的使用,例子用于改变alv的gt_fieldcat_alv LOOP AT gt_fieldcat_alv ASSIGNING <fs_f ...
- VC图形绘制双缓存的代码复用性讨论
在前文中已经讨论了如何实现界面绘制双缓存的问题,前文网址如下: http://www.2cto.com/kf/201111/112429.html 双缓存的主要思路是:先把图形绘制到内存DC中,然后再 ...
- Win7和VS2013上使用Intel的TBB
源地址:http://www.th7.cn/system/win/201505/103966.shtml http://wenku.baidu.com/link?url=zH7vwmWltWF5R-9 ...
- dvtm: 平铺式终端管理器 — LinuxTOY
dvtm: 平铺式终端管理器 — LinuxTOY LinuxTOY 是一个致力于提供 Linux 相关资讯的专题站点.如果您发现了好用好玩的 Linux 东东并愿意发扬自由.分享的精神,可以点击顶部 ...
- Oracle控制文件操作
控制文件是连接instance和 database的纽带.记录了database的结构信息. 控制文件是1个2进制文件.记录的是当前database的状态. 控制文件可以有多个,在参数文件中通过con ...
- C#使用Redis集群缓存
C#使用Redis集群缓存 本文介绍系统缓存组件,采用NOSQL之Redis作为系统缓存层. 一.背景 系统考虑到高并发的使用场景.对于并发提交场景,通过上一章节介绍的RabbitMQ组件解决.对于系 ...