水平翻转效果：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style type="text/css">

			.stage {

				width: 140px;

				height: 200px;

				perspective: 800px;

			}

			.container {

				position: relative;

				width: 140px;

				height: 200px;

				transform-style: preserve-3d;

				transition: 1s;

			}

			.front {

				position: absolute;

				width: 140px;

				height: 200px;

        		background-image: url(img/3tb_160824110159262h572240.jpg);

				background-size: cover;

				backface-visibility: hidden;

			}

			.back {

				position: absolute;

				width: 140px;

				height: 200px;

				background-image: url(img/3tb_160824110159xh65572240.jpg);

				background-size: cover;

				transform: rotateY(180deg);

				backface-visibility: hidden;

			}

			.stage:hover .container {

				transform: rotateY(180deg);

			}

		</style>

	</head>

	<body>

		<div class='stage'>

			<div class='container'>

				<div class='front'></div>

				<div class='back'></div>

			</div>

		</div>

	</body>

</html>

　3D 旋转：

<!doctype html>

<html lang="en">

	<head>

		<meta charset="UTF-8" />

		<title>Document</title>

		<style type="text/css">

			* {

				margin: 0;

				padding: 0;

			}

			.wrap {

				padding: 50px;

			}

			.stage {

				width: 100px;

				height: 100px;

				-webkit-perspective: 2000px;

				perspective: 2000px;

				list-style: none;

			}

			.container {

				position: relative;

				width: 100px;

				height: 100px;

				-webkit-transform-style: preserve-3d;

				transform-style: preserve-3d;

				-webkit-transition: 1s;

				transition: 1s;

			}

			.front {

				position: absolute;

				width: 100px;

				height: 100px;

				-webkit-transform: translateZ(50px);

				transform: translateZ(50px);

				-webkit-backface-visibility: hidden;

				backface-visibility: hidden;

			}

			.front img {

				width: 100%;

				height: 100%;

			}

			.back {

				position: absolute;

				display: block;

				width: 100px;

				height: 100px;

				text-align: center;

				line-height: 100px;

				-webkit-transform: rotateY(90deg) translateZ(50px);

				transform: rotateY(90deg) translateZ(50px);

				-webkit-backface-visibility: hidden;

				backface-visibility: hidden;

			}

			li:nth-child(1) .back {

				background-color: skyblue;

			}

			li:nth-child(2) .back {

				background-color: pink;

			}

			li:nth-child(3) .back {

				background-color: lightyellow;

			}

			.container:hover {

				-webkit-transform: rotateY(-90deg);

				transform: rotateY(-90deg);

			}

		</style>

	</head>

	<body>

		<ul class="wrap">

			<li class="stage">

				<div class='container'>

					<div class="front"><img src="http://d3.freep.cn/3tb_160824132644ihf4572240.jpg" /></div>

					<p class="back">帅气的胡歌</p>

				</div>

			</li>

			<li class="stage">

				<div class='container'>

					<div class="front"><img src="http://d2.freep.cn/3tb_160824132644w0r4572240.jpg" /></div>

					<p class="back">美腻的赵丽颖</p>

				</div>

			</li>

			<li class="stage">

				<div class='container'>

					<div class="front"><img src="http://d3.freep.cn/3tb_160824235542tkj9572240.jpg" /></div>

					<p class="back">清纯的刘亦菲</p>

				</div>

			</li>

		</ul>

	</body>

</html>

　　

CSS3系列之3D制作 再研究的更多相关文章

  1. CSS3系列之3D制作

    一.序 博主最近这些天,突发奇想的想研究一下CSS3的东西,从而提升一下CSS的能力,在学习的过程中发现其实CSS3是一个挺复杂的东西,深入的研究,你可能会涉及到初中的光学理论来帮助理解一些概念,同时 ...

  2. 利用CSS3的transform 3D制作的立方体旋转效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. HTML5+CSS3系列教程——如何制作简单按钮笔记

      1.按钮的制作方式 用图片(目前用的不多) 纯CSS a标签 input 图片二决定了input的类型 当input的type属性是submit button等这些的时候他呈现一个按钮 butto ...

  4. 纯CSS3彩色边线3D立体按钮制作教程

    原文:纯CSS3彩色边线3D立体按钮制作教程 今天我们来分享一款利用纯CSS3实现的3D按钮,这款按钮的一个特点是有彩色的边线,这让整个按钮显得比较多姿多彩,没那么枯燥无趣.本文不仅可以让大家看到演示 ...

  5. 使用CSS3实现一个3D相册

    CSS3系列我已经写过两篇文章,感兴趣的同学可以先看一下CSS3初体验之奇技淫巧,CSS3 3D立方体效果-transform也不过如此 第一篇主要列出了一些常用或经典的CSS3技巧和方法:第二篇是一 ...

  6. ZAM 3D 制作简单的3D字幕 流程(二)

    原地址:http://www.cnblogs.com/yk250/p/5663907.html 文中表述仅为本人理解,若有偏差和错误请指正! 接着 ZAM 3D 制作简单的3D字幕 流程(一) .本篇 ...

  7. css3实践—创建3D立方体

    css3实践-创建3D立方体 要想实现3D的效果,其实非常简单,只需指定一个元素为容器并设置transform-style:preserve-3d,那么它的后代元素便会有3D效果.不过有很多需要注意的 ...

  8. CSS3火焰文字特效制作教程

    原文:CSS3火焰文字特效制作教程 用一句很俗气的话概括这两天的情况就是:“最近很忙”,虽然手头上有不少很酷的HTML5和CSS3资源,但确实没时间将它们的实现过程写成教程分享给大家.今天刚完成了一个 ...

  9. 巧用CSS3 :target 伪类制作Dropdown下拉菜单（无JS）

    :target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如说当前页面URL下添加#comment就会定位到id=“comment”的位置,俗称锚).CSS3 为 ...

随机推荐

  1. js 模块开发之一（模块开发价值）

    首先引用我们的今天的主角 ----<前端模块化开发的价值> 1,前端开发最常见的两个问题 ---命名冲突和文件依赖 2,对于命名冲突的基本解决办法就是学习其他语言的习惯,添加命名空间 va ...

  2. 改进的SQL Express LocalDBB

    介绍一种改进的SQL Express LocalDB LocalDB专门为开发商.它是非常容易安装,无需管理,但它提供了相同的T-SQL语言,编程表面和客户端供应商定期的SQL Server Expr ...

  3. ssh框架整合---- spring 4.0 + struts 2.3.16 + maven ss整合超简单实例

    一 . 需求 学了这么久的ssh,一直都是别人整合好的框架去写代码,自己实际动手时才发现框架配置真是很坑爹,一不小心就踏错,真是纸上得来终觉浅! 本文将记录整合struts + spring的过程 , ...

  4. PHP declare(ticks=N); 的作用

    一般用法是 declare(ticks=N);拿declare(ticks=1)来说,这句主要作用有两种: 1.Zend引擎每执行1条低级语句就去执行一次 register_tick_function ...

  5. Windows XP SP3下编译安装openssl-1.1.0b

    软件需要: openssl-1.1.0b visual studio 2010(cn_visual_studio_2010_ultimate_x86_dvd_532347.iso) perl:Acti ...

  6. linux中的开机和关机命令

    与关机.重新启动相关的命令 * 将数据同步写入硬盘中的命令  sync * 惯用的关机命令  shutdown * 重新启动.关机  reboot halt poweroff sync 强制将内存中的 ...

  7. C#中不同的线程对控件的更改

    .net 不允许跨线程个性其它线程创建的控件. 要想实现这个功能就需要用 InvokeRequired 检查是不是由该线程创建的控件,如果是直接操作,如果不是则 用Invoke 添加一个委托再加上参数 ...

  8. [Delphi编译错误]F2084 Internal Error: U2107

    看到这个错误真是头痛,这是一个很旧的项目了,想修改下东西,清理下工程一编译出现这个该死的错误,百度了下,也没解决问题.没办法只好编译所有的BPL了.   这个项目是带包编译的,而且带了几个自己的包. ...

  9. python dict

    ###字典的基本结构 info = { "k1" : "v1", "k2" : "v2" } ###字典的valus可以 ...

  10. perl 对源文件内容修改 方法整理

    1, 利用Tie::File模块来直接对文件内容进行修改. #!/usr/bin/perl -w my $std="F160"; my $fast="FAST" ...