3D旋转动画
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>css3 3D广告</title>
<script src="js/jquery.1.9.0.min.js"></script>
<style>
img {
width:300px;
height:200px;
}
section div {
position:absolute;
top:0px;
left:0px;
width:300px;
height:200px;
}
</style>
</head>
<body>
<div style="position:relative;margin:0 auto;width:300px;">
<section>
<!-- backface-visibility 属性可用于隐藏内容的背面。默认情况下,背面可见,
这意味着即使在翻转后,变换的内容仍然可见。但当 backface-visibility
设置为 hidden 时,旋转后内容将隐藏,因为旋转后正面将不再可见。-->
<div style="-webkit-transition:-webkit-transform 0.8s ease;-webkit-backface-visibility:hidden;
-webkit-transform:rotate3d(0,1,0,180deg);">
<a href="#">
<img src="data:images/di%20(1).jpg" />
</a>
</div>
<div style="-webkit-transition:-webkit-transform 0.8s ease;-webkit-backface-visibility:hidden;
-webkit-transform:rotate3d(0,1,0,0deg);">
<a href="#">
<img src="data:images/di%20(2).jpg" />
</a>
</div>
</section>
</div>
</body>
<script>
var sign = 0;
setInterval(function () {
if (sign % 2 == 0) {
$("section").find("div").eq(0).css("-webkit-transform", "rotate3d(0,1,0,0deg)");
$("section").find("div").eq(1).css("-webkit-transform", "rotate3d(0,1,0,180deg)");
} else {
$("section").find("div").eq(0).css("-webkit-transform", "rotate3d(0,1,0,180deg)");
$("section").find("div").eq(1).css("-webkit-transform", "rotate3d(0,1,0,0deg)");
}
sign++;
}, 2000)
</script>
</html>
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旋转动画代码实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 3D旋转动画练习 demo
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- CSS3 3D旋转动画菜单
在线演示 本地下载
- 3d旋转动画焦点图
在线演示 本地下载
- CSS3鼠标滑过图片3D旋转动画
在线演示 本地下载
- CSS3实现3D木块旋转动画
CSS3实现3D木块旋转动画,css3特效,旋转动画,3D,立体效果,CSS3实现3D木块旋转动画是一款迷人的HTML5+CSS3实现的3D旋转动画. 代码下载:http://www.huiyi8.c ...
- Android立体旋转动画实现与封装(支持以X、Y、Z三个轴为轴心旋转)
本文主要介绍Android立体旋转动画,或者3D旋转,下图是我自己实现的一个界面 立体旋转分为以下三种: 1. 以X轴为轴心旋转 2. 以Y轴为轴心旋转 3. 以Z轴为轴心旋转--这种等价于andro ...
随机推荐
- [SAP ABAP开发技术总结]BAPI调用
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- Linux红帽认证----I Want
仅此设定一个目标,此证一定搞到手!!!
- Codeforces Round #375 (Div. 2) D. Lakes in Berland dfs
D. Lakes in Berland time limit per test 2 seconds memory limit per test 256 megabytes input standard ...
- XAF使用数据库访问层缓存的提升性能
很多时候,为了提升性能,我们可以给数据库访问层做缓存. 以下几步可以完成这个任务:1. 使用自定义的 XPObjectSpaceProvider1.1. 创建自定义的 XPObjectSpacePro ...
- yii 常用路径
yii::app()->homeurl //主页的网址 yii系统变量. //得到proteced目录的物理路径 Yii::app()->basePath; 调用YII框架中jquery: ...
- js模块化编程总结
大家都知道,js中的变量(variable)有其作用范围,比如:函数里用var定义的变量在函数外是看不到的,而定义在函数外面的变量(不能有没有var修饰)均是全局变量,在js程序的任何位置都可以访问. ...
- Javascript设计模式之匿名函数与闭包
匿名函数 (function () { var foo = 10; var bar = 2; console.log(foo*bar); })(); // 20 带参数的匿名函数 (function ...
- 使用kaptcha生成验证码
原文:http://www.cnblogs.com/xdp-gacl/p/4221848.html kaptcha是一个简单好用的验证码生成工具,通过配置,可以自己定义验证码大小.颜色.显示的字符等等 ...
- 转:copy initialization
转自: http://en.cppreference.com/w/cpp/language/copy_initialization copy initialization C++ C++ la ...
- Struts2配置文件
Struts2配置文件 简介: 与Struts2相关的配置文件有好几个,常用的有 struts.properties , web.xml, struts.xml等.web.xml中配置Struts2的 ...