图片触及翻转效果 css3
实现图片由左向右飞入回到最初设定位置 ，鼠标浮上去旋转显示另一张图片效果；
html:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html"; charset="utf-8" />
<title>图片翻转CSS3</title> </head>
<body>
<div class="page">
<ul id="box">
<li>
<div class="div1">
<img src="Images/m.png" alt=""/></div>
</li>
<li>
<span></span><div class="div2">
<img src="Images/w.png" alt=""/></div>
</li>
<li>
<span></span><div class="div3">
<img src="Images/k.png" alt=""/></div>
</li>
<li>
<span></span><div class="div4">
<img src="Images/t.png" alt=""/></div>
</li>
</ul>
</div> </body>
</html>
2. css部分：
@-webkit-keyframes "mixovMove"
{
0%
{
-webkit-animation-timing-function:ease;
left:-300px;
-webkit-transform:rotateY(0deg) scale(0);
opacity:;
}
50%
{
left:700px;
-webkit-transform:rotateY(0deg) scale(0.4);
opacity:;
}
100%
{
-webkit-transform:rotateY(360deg) scale(1);
}
}
html
{
height:100%; margin:0 auto; position:relative;
}
body
{
background:url(Images/miaov.jpg) no-repeat center 0; margin:0 auto; overflow:hidden; padding-top:128px;
}
ul
{
margin:; padding:;
}
li
{
list-style:none;
}
.page
{
height:615px; background:url(Images/1-bg.png) no-repeat;position:relative;overflow:hidden; -webkit-transform-style:preserve-3d;-webkit-perspective:; margin:0 auto; width:1024px; /*子元素获得透视效果perspective 属性只影响 3D 转换元素。*/
}
#box
{
width:760px; height:170px; position:absolute; top:150px; left:132px;
}
li
{
float:left; margin:0 10px; width:170px; height:170px; position:relative;
}
#box div
{
width:170px; height:170px; -webkit-transform:translateZ(-100px) rotateY(0deg); -webkit-transition:300ms -webkit-transform linear;
}
#box span
{
position:absolute; left:; top:; width:170px; height:170px;
}
#box img
{
display:none; -webkit-transform:rotateY(180deg);
}
.div1
{
background:url(Images/c.png) no-repeat;
}
.div2
{
background:url(Images/s-1.png) no-repeat;
}
.div3
{
background:url(Images/s-2.png) no-repeat;
}
.div4
{
background:url(Images/3.png) no-repeat;
}
3.js部分：
<script>
window.onload = function () {
var oBox = document.getElementById("box");
var aLi = oBox.getElementsByTagName("li");
var aImg = oBox.getElementsByTagName("img");
var aDiv = oBox.getElementsByTagName("div");
for (var i = 0; i < aLi.length; i++) {
aLi[i].left = aLi[i].offsetLeft;
aLi[i].style.left = "-200px";
aLi[i].style.top = "0";
aLi[i].index = i;
aLi[i].oTimer = null;
aLi[i].style["WebkitTransform"] = "rotateY(0deg) scale(0)";
}
for (var i = 0; i < aLi.length; i++)
{
aLi[i].style.position = "absolute";
move(aLi[i], 300 * i);
aLi[i].onmouseover = function () {
var oBj = this;
// debugger;
clearTimeout(oBj.oTimer);
oBj.oTimer = setTimeout(function () {
aImg[oBj.index].style.display = "block";
aDiv[oBj.index].style["WebkitTransform"] = "rotateY(180deg)"; //后执行
}, 290);
aDiv[oBj.index].style["WebkitTransform"] = "rotateY(90deg)"; //先执行
};
aLi[i].onmouseout = function ()
{
var oBj = this;
clearTimeout(oBj.oTimer);
oBj.oTimer = setTimeout(function () {
aImg[oBj.index].style.display = "none";
aDiv[oBj.index].style["WebkitTransform"] = "rotateY(0deg)";
}, 295);
aDiv[oBj.index].style["WebkitTransform"] = "rotateY(90deg)";
} }
}; function move(obj, iTime)
{
var oTimer = null;
oTimer = setTimeout(function () {
obj.style.left = obj.left + "px";
obj.style["WebkitTransform"] = "rotateY(0deg) scale(1)";
obj.style["WebkitAnimationName"] = "mixovMove";
obj.style["WebkitAnimationDuration"] = "2s"; },iTime)
}
</script>
图片触及翻转效果 css3的更多相关文章
- css3图片3D翻转效果
点击图片看翻转效果 html结构 <div class="flip"> <div class="front"> <img src= ...
- 基于jQuery遮罩图片hover翻转效果
基于jQuery遮罩图片hover翻转效果.这是一款基于jQuery+css3实现的鼠标经过遮罩图片翻转特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div cla ...
- flip 翻转效果 css3实现
1.实现代码 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UT ...
- CSS3之图片3D翻转效果(网页效果--每日一更)
今天,带来的是纯CSS3的效果--图片3D翻转. 请看效果:亲,请点击这里 这个效果主要还是运用了CSS3的transform变形属性,与上个效果不同的是,这次并不是动画,所以没有采用animatio ...
- 用开源项目FlipImageView实现图片的翻转效果
开源项目地址:https://github.com/castorflex/FlipImageView 本实例我没做什么改动,就是添加了注释,方便大家阅读.和之前一样,导入library和工程 ...
- css3实现色子自动翻转效果
原文:css3实现色子自动翻转效果 css3使我们能够跳出2d空间,实现3维空间的动画效果,这里给出一个自动翻转的3d色子动画效果制作过程. 第一步,首先进行HTML的布局,对于3D效果,布局有一定的 ...
- HTML和CSS实现图片翻转效果
实现图片翻转,首先来分析一下我们希望实现的是怎样的翻转效果?又该如何去实现呢? 一.希望实现的效果 页面上的图片在光标悬停在上面的时候会发生翻转效果,翻转过后显示出背面的说明文字. 鼠标没有悬停在上面 ...
- CSS3的翻转效果
css3图片与文字3D transform切换: http://www.w3cplus.com/demo/419.html 详细的CSS3属性详解: http://www.zhangxinxu.com ...
- div 中图片溢出问题及 CSS3中图片翻转问题
如果设置一个div 装两张以上的图片,如果不设置好div的宽度和高度,就会使图片溢出. 我们知道,div是可以由图片撑开其宽高的,也就是说如果只放一张图片的情况下,不设置div的宽高,div的宽高会默 ...
随机推荐
- java 过滤器（理解二）
request.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=utf ...
- Node.js monly图片批量下载爬虫1.00
此爬虫又用到了iconv转码,代码如下: //====================================================== // mmonly图片批量下载爬虫1.00 ...
- 虚拟机VMware12.0安装centos 6.5+VMware中虚拟机网络模式区分
之前的步骤一路next,有设置内存大小的根据机器的配置设置一下即可. 需要注意的地方, 下面是对于简化版进行设置的步骤 虚拟机网络模式 1.桥接模式 在桥接模式下,VMware虚拟机里的系统就像是 局 ...
- HTTP常用端口号与对应的服务说明
常用端口号与对应的服务以及端口关闭 端口简介:本文介绍端口的概念,分类,以及如何关闭/开启一个端口 21端口:21端口主要用于FTP(File Transfer Protocol,文件传输协议)服务. ...
- 在EXCEL中如何让一列数字变成文本格式?就是想让单元格的左上角变一个绿绿的？
如何在EXCEL中如何让一列数字变成文本格式?就是想让单元格的左上角变一个绿绿的? 解决方案:将整列单元格格式设为文本,然后,选中该列,数据--分列--完成 详细步骤: (1)选中1行或者1列,再单击 ...
- 算法笔记_093:蓝桥杯练习 Problem S4: Interesting Numbers 加强版（Java）
目录 1 问题描述 2 解决方案 1 问题描述 Problem Description We call a number interesting, if and only if: 1. Its d ...
- LoadRunner测试ajaxweb程序攻略
用loadrunner测试WEB程序的时候总是会碰到AJAX或者ActiveX实现的功能,而通常这些功能会包含很多客户端函数(一般为JavaScript).我们该如何处理?如果从功能实现的角度去考虑这 ...
- ionic 进入二级目录以后隐藏底部导航栏（tabs）
1.在标签ion-tabs中添加:ng-class=”{‘tabs-item-hide’: $root.hideTabs}”,源码如下: <ion-tabs class="tabs-i ...
- 一次vm 虚拟机时间倒流而导致的oracle 数据库启动故障
一次vm 虚拟机时间倒流而导致的oracle 数据库启动故障 本文是原创文章.若转载请注明出处: http://blog.csdn.net/msdnchina/article/details/3878 ...
- STL源码剖析(仿函数/bind2nd)
仿函数(functors)其实就是重载了operator()的对象. 下面简单先看看它的一个例子: #include <iostream> using namespace std; tem ...