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旋转动画
在线演示 本地下载
随机推荐
- org.apache.jasper.JasperException: java.lang.ClassCastException
异常信息: org.apache.jasper.JasperException: java.lang.ClassCastException:org.apache.catalina.util.Defau ...
- 一个网友写的栈，问为啥不能迭代。具有__iter__ 和next方法的对象叫迭代器-七七巴巴黄页网
一个网友写的栈,问为啥不能迭代.具有__iter__ 和next方法的对象叫迭代器-七七巴巴黄页网 一个网友写的栈,问为啥不能迭代.具有__iter__ 和next方法的对象叫迭代器 python视频 ...
- Hibernate之1-N关联映射
一.Hibernate之1-N关联映射 1. 哪边是 1 , 哪边是多 ? 须要从业务的角度来说明.比如,Employee 和 Department 之间就是 n-1 的关联关系,Order ...
- CentOS 6.5安装Erlang/OTP 17.0
CentOS 6.5安装Erlang/OTP 17.0 作者:chszs,转载需注明.博客主页:http://blog.csdn.net/chszs Erlang眼下已经是Fedora和Debian/ ...
- 网站集成QQ登录功能（转）
最近在做一个项目时,客户要求网站能够集成QQ登录的功能,以前没做过这方面的开发,于是去QQ的开放平台官网研究了一下相关资料,经过自己的艰苦探索,终于实现了集成QQ登录的功能,现在把相关的开发经验总结一 ...
- Android实战简易教程-第九枪（BitmapFactory.Options对资源图片进行缩放）
我们知道,我们编写的应用程序都是有一定内存限制的.程序占用了过高的内存就easy出现OOM(OutOfMemory)异常.因此在展示高分辨率图片的时候,最好先将图片进行压缩,压缩后的图片大小应该和用来 ...
- A股市场暴跌背后的三大元凶？
周一两市低开低走,盘中空方连续打压股指,大盘一路下行,沪指2000点关口告急,收于1963.24点,跌幅超过了5%.行业板块全线溃败.银行.证券领衔大幅杀跌,板块跌幅一度超过5%:继上周五中国石油A股 ...
- php设计模式——UML类图
前言 用php开发两年多了,准备也写一下平时常用的设计模式,都是基于自己的实践经验,当然,用设计模式之前首先要看懂设计模式,因此这里首先讲解一下UML类图.通过UML类图,能更好的和大家交流,也能很容 ...
- nyist oj 311 全然背包 （动态规划经典题）
全然背包 时间限制:3000 ms | 内存限制:65535 KB 难度:4 描写叙述 直接说题意,全然背包定义有N种物品和一个容量为V的背包.每种物品都有无限件可用.第i种物品的体积是c,价值是 ...
- 在Windows通过使用MinGW静态编译Assimp
使用MinGW静态编译Assimp 到了5月份了.没有写一篇日志,于是自己从知识库里面拿出一篇文章充数吧.这次将要解说怎样在Windows下使用MinGW静态编译Assimp. Assimp是眼下比較 ...