css3 图片翻转效果

源代码下载地址：http://www.zuidaima.com/share/1571389560998912.htm

自己写的图片翻转的demo, 主要是css3的应用

里面就一个文件, 直接打开就可以了,

引用了在线的jquery, 图片也用data uri直接写在页面里了

时间： 2024-12-14 18:12:32

css3 图片翻转效果的相关文章

Image Wall - jQuery & CSS3 图片墙效果

今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将关闭并重新打开一个更大的图像预览效果. 在线演示下载源码您可能感兴趣的相关文章充满想象力的 JavaScript 物理和重力实验精选9个值得学习的 HTML5 效果[附源码] 精选12个时尚的 CSS3 效果[附源码下载] 十分惊艳的8个 HTML5 & JavaScript 特效

Css3图片翻转

<!DOCTYPE html> <html> <head> <title>Css3图片翻转</title> <meta charset="utf-8" /> <style> .flip-container { perspective: 1000; transform-style: preserve-3d; } .flip-container, .front, .back { width: 320px;

CSS3图片翻转切换案例及其中重要属性解析

图片翻转切换,在不使用CSS3的情况下,一般都是使用JS实现动画,同时操作元素的width和left,或者height和top以模拟翻转的效果,并在适当时候改变src或者z-index实现图片切换. 无意中发现CSS3的方案, http://www.webhek.com/css-flip/ 赶紧学习并总结如下先上代码(多数照搬自上述链接,有很大兼容问题,小心使用) HTML: <div class="flip-container"> <div class=&quo

CSS3的翻转效果

css3图片与文字3D transform切换: http://www.w3cplus.com/demo/419.html 详细的CSS3属性详解: http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/ 总结如下: 1.需要使用到的CSS3属性透视和视角:perspective:8000px; -------------放在舞台上(.box) 需要用到tran

HTML和CSS实现图片翻转效果

实现图片翻转,首先来分析一下我们希望实现的是怎样的翻转效果?又该如何去实现呢? 一.希望实现的效果页面上的图片在光标悬停在上面的时候会发生翻转效果,翻转过后显示出背面的说明文字. 鼠标没有悬停在上面的效果鼠标悬停在其中一张图片上的效果: 二.实现方法每幅图片的翻转效果都是沿着Y轴进行反转的,可以是用3D变换来实现这种效果.下面来具体分析实现的各个步骤. HTML结构部分: 1.首先将变换图片和文字放在一个父容器中,因为设置了五张图片所以需要五个父容器.这五个父容器又被放置在一个div(舞台

css3 3d翻转效果

<div class="demo"> <span class="front"> aaaaaaaaaaaaaa </span> <span class="behind"> bbbbbbb </span> </div> .demo{ display: block; cursor: poi

jq和css3图片拉近效果

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script src="js/jquery-1.7.2.min.js"></script> <title></title> </head> <body> <style> #test{widt

使用JS实现图片翻转效果

.flip-container { perspective:1000px;/*设置假定人眼到投影平面的距离为1000px,只影响3D元素,不影响2D元素*/ width: 1300px; margin:0 auto;}.front,.back { width:400px; height:400px;}.flipper { width: 400px; height: 400px; border-radius: 50%; margin-left:10px; margin-bottom:120px;

css3 图片抖动效果

@-moz-keyframes tada{ 0%{-moz-transform:scale(1);} 10%,20%{-moz-transform:scale(0.9) rotate(-3deg);} 30%,50%,70%,90%{-moz-transform:scale(1.2) rotate(3deg);} 40%,60%,80%{-moz-transform:scale(1.2) rotate(-3deg);} 100%{-moz-transform:scale(1) rotate(0)