CSS3之图片3D翻转效果(网页效果--每日一更)

  今天,带来的是纯CSS3的效果--图片3D翻转。

  请看效果:http://localhost:63342/webfront/PC/rotate.html

  这个效果主要还是运用了CSS3的transform变形属性,与上个效果不同的是,这次并不是动画,所以没有采用animation属性,而是采用transition过渡属性。这个属性会将元素在两种效果之间进行切换,并产生一个过渡效果。详情请看代码。

  HTML结构:

 1     <div id="content">
 2         <div class="list">
 3             <img src="../Images/1.jpg">
 4             <div class="text">
 5                 这是小狗哦!!
 6             </div>
 7         </div>
 8         <div class="list">
 9             <img src="../Images/2.jpg">
10             <div class="text">
11                 这是小狗哦!!
12             </div>
13         </div>
14     </div>

  CSS样式:

 1 <style type="text/css">
 2         *{margin:0px;padding:0px;}
 3         #content{
 4             width:500px;
 5             margin:30px auto;
 6         }
 7         .list{
 8             width:200px;
 9             margin:25px;
10             float:left;
11             position:relative;
12         }
13         .list img{
14             width:200px;
15             height:200px;
16             transform:perspective(200px) rotateY(0deg);
17             opacity:1;
18             transition:transform 600ms ease,opacity 600ms ease;
19             -webkit-transition:transform 600ms ease,opacity 600ms ease;
20         }
21         .text{
22             height:200px;
23             width:200px;
24             line-height:200px;
25             background:#000;
26             color:#fff;
27             opacity:0;
28             position:absolute;
29             text-align:center;
30             font-weight:bold;
31             top:0px;
32             left:0px;
33             transform:perspective(200px) rotateY(-180deg);
34             transition:transform 600ms ease,opacity 600ms ease;
35             -webkit-transition:transform 600ms ease,opacity 600ms ease;
36         }
37         .list:hover img{
38             transform:perspective(200px) rotateY(180deg);
39             opacity:0;
40             transition:transform 600ms ease,opacity 600ms ease;
41             -webkit-transition:transform 600ms ease,opacity 600ms ease;
42         }
43         .list:hover .text{
44             transform:perspective(200px) rotateY(0deg);
45             opacity:1;
46             transition:transform 600ms ease,opacity 600ms ease;
47             -webkit-transition:transform 600ms ease,opacity 600ms ease;
48         }
49     </style>

  代码很容易理解,先为图片设置一个初始旋转角度,因为它是先展示的,所以角度为180deg,透明度为1。当鼠标滑过时,改变角度和透明度,使其翻转。而背后的文字也是如此道理。

  享受代码,享受生活,网页效果,每日一更。

时间: 2024-11-02 23:38:56

CSS3之图片3D翻转效果(网页效果--每日一更)的相关文章

在CSS3中图片3D翻转效果是这样做到的

今天,带来的是纯CSS3的效果--图片3D翻转. 请看效果:http://webfront.verynet.cc/pc/rotate.html 这个效果主要还是运用了CSS3的transform变形属性,与上个效果不同的是,这次并不是动画,所以没有采用animation属性,而是采用transition过渡属性.这个属性会将元素在两种效果之间进行切换,并产生一个过渡效果.详情请看代码. HTML结构: 1 <div id="content"> 2 <div class

一款纯css3实现的图片3D翻转幻灯片

之前介绍了好多款网页幻灯片,今天要给大家再带来一款纯css3实现的图片3D翻转幻灯片.这款幻灯片图片轮播采用了3D翻转的形式,效果非常不错.一起看下效果图: 在线预览   源码下载 实现的代码. html代码: <div style="width: 850px; margin: auto;"> <h1> pure CSS slice cube slideshow</h1> <style> @import 'http://codepen.i

一个简单的全屏图片上下打开显示网页效果

打包下载地址:http://download.csdn.net/detail/sweetsuzyhyf/7602105 上源码看效果: <!DOCTYPE html> <html> <head> <title></title> <style> body { margin: 0; padding: 0; } .wrap { overflow: hidden; position: fixed; z-index: 99999; width:

基于css3的文字3D翻转特效

一款基于css3的文字3D翻转特效.这款特效当鼠标经过文字的时候3D翻转显示阴影.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="component"> <ul class="grid"> <li> <div class="codrops-header"> <h1> Animated Opening Type</h1> </d

css3图片3D翻转效果

点击图片看翻转效果 html结构 <div class="flip"> <div class="front"> <img src="images/img_01.jpg" alt=""> </div> <div class="back"> <img src="images/img_03.jpg" alt="&quo

jQuery和CSS3超酷3d翻转图片幻灯片插件

这是一款效果非常炫酷的jQuery和CSS3 3d翻转图片幻灯片插件.这个幻灯片插件开始的时候图片都堆叠在一起,当用户点击了其中的某张图片后,该图片会以3D翻转的方式"飞"到堆叠图片的最前面. 在该幻灯片插件中使用了 CSS3 transition.CSS3 animations 和 CSS3 transforms,并用jQuery来处理鼠标点击事件. 在线演示:http://www.htmleaf.com/Demo/201502081346.html 下载地址:http://www.

JQuery图片轮播滚动效果(网页效果--每日一更)

今天,带来的是一个图片的轮播滚动效果! 先来看一下效果展示:http://webfront.verynet.cc/pc/index.html 原理很简单,设置一个定时器,使图片列表在每隔一段时间后滚动一次.而循环效果,就是在每一滚动的时候,将第一张图片放到最后一张的后面,详细请看代码. HTML结构代码如下: 1 <div class="content"> 2 <div class="box"> 3 /*滚动的盒子*/ 4 <ul id

WPF实现3D翻转的动画效果

1.前端代码实现 1.1 原理见代码注析 <Grid MouseDown="Grid_MouseDown"> <Viewport3D> <Viewport3D.Camera> <!-- Position属性指定3D空间中摄像机的位置,LookDirection属性为摄像机方向 --> <PerspectiveCamera Position="0 0 500" LookDirection="0 0 -1&

图片3d轮放查看效果

本功能比较简单,就是一个大幕,左右滚动播放图片. 关键点在于如何实现平滑的滚动,包括动画效果,3d效果等. <style> img { position: absolute; top:200; left:400px; /* border: 1px solid #333;*/ padding: 2px 5px 2px 5px; -webkit-transition:ease all 0.7s; -webkit-transform-origin: 50% 50% 600px; /* backgro