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旋转动画
在线演示 本地下载
随机推荐
- hdu 4507 数位dp（求和，求平方和）
http://acm.hdu.edu.cn/showproblem.php?pid=4507 Problem Description 单身! 依旧单身! 吉哥依旧单身! DS级码农吉哥依旧单身! 所以 ...
- Swift - 设置程序的应用图标和启动界面
一个应用,无论发布到App Store,还是安装到用户的屏幕上,都需要一个标志性的图标.同时,在应用启动时也要有个启动画面,否则启动时将会是纯黑的屏幕. 1,在项目的“General”选项卡下的“Ap ...
- Introduction to Probability (三) Independence
两个事件独立性的定义是:事件A的发生对事件B的发生毫无影响,即从A的发生与否.我们不能猜測出B是否发生. 从概率等式的表示来看就是B在A发生的情况下发生的概率等于B发生的概率本身. 进而引出了A与B同 ...
- ASP.NET - 获得客户端的 IP 地址
通常我们都通过下面的代码获得IP: REMOTE_ADDR 说明:访问客户端的 IP 地址. 此项信息用户不可以修改.如果真的给改了的话,你也和服务器连接不了了,服务器就是按照这个来与客户端建立连接并 ...
- spring mvc controller间跳转 重定向
1. 需求背景 需求:spring MVC框架controller间跳转,需重定向.有几种情况:不带参数跳转,带参数拼接url形式跳转,带参数不拼接参数跳转,页面也能显示. 本来以为挺简单的一 ...
- 做web项目时对代码改动后浏览器端不生效的应对方法（持续更新）
做web项目时,常常会遇到改动了代码,但浏览器端没有生效,原因是多种多样的,我会依据我遇到的情况逐步更新解决的方法 1.执行的时候採用debug模式,普通情况下使用项目部署button右边那个butt ...
- 使用git微命令深入理解git工作机制
首先.这篇不是真正意义上的翻译,所以大家在看的时候不要找相应的英文文章相应着看.这篇文章之所以归类为翻译.是由于最開始有一篇英文文章让我对git内部机制有了清楚的认识,它能够说是我git的启蒙老师吧. ...
- 一个通用onReady函数的实现
define([], function(){ function onReady(fn) { var DOC = document, html = DOC.documentElement, W3C = ...
- PHP操作Mysql中间BLOB场
1.MySQL在BLOB字段类型 BLOB场的类型用于存储二进制数据. MySQL在.BLOB它是一种类型的一系列.含有:TinyBlob.Blob.MediumBlob.LongBlob.大小上不同 ...
- ACdream 1114(莫比乌斯反演)
传送门:Number theory 题意:给n个数,n 和 每个数的范围都是 1---222222,求n个数中互质的对数. 分析:处理出每个数倍数的个数cnt[i],然后进行莫比乌斯反演,只不过这里的 ...