水平翻转效果：

<!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语句

    在做登陆界面时,有这样一个需求,就是输入密码时,以密文形式展示(*),由于html5的属性  type="password" 只能以圆点形式展示, 下面方法能以星号代替输入符合 d ...

  2. Linux课程实践一：Linux基础实践（基础操作）

    一.软件源维护 1. 基本操作 (1)查看源列表 sudo vim /etc/apt/sources.list deb:二进制软件安装包 deb-src:源码包 (2)备份软件源列表 sudo cp ...

  3. textview 多行 省略号

    TextView自带的可以通过 android:ellipsize="end" android:singleLine="true"实现单行省略,  多行显示: ...

  4. spring结合Quartz的集群功能实现

    一:前沿 在上一篇(http://www.cnblogs.com/wuhao1991/p/4331613.html)的博客中记载了定时的功能,但是集成是没有成功的,在这篇中,我在解释下这里的”集成的含 ...

  5. 解决:HttpClient导致应用出现过多Close_Wait的问题

    最近发现一个问题,在服务器上通过netstat命令发现有大量的Close_Wait长时间存在,甚至有时候数量接近1000: 查看服务器参数(etc/sysctl.conf): net.ipv4.tcp ...

  6. (四) 一起学 Unix 环境高级编程(APUE) 之 系统数据文件和信息

    . . . . . 目录 (一) 一起学 Unix 环境高级编程 (APUE) 之 标准IO (二) 一起学 Unix 环境高级编程 (APUE) 之 文件 IO (三) 一起学 Unix 环境高级编 ...

  7. Oracle相关账户几个语句

    Oracle安装完成后,在“开始”里找到SQL Plus运行,要求输入帐号和密码,用system/密码连接. 1.Oracle里有一个默认的scott账户密码tiger,用该账户连接: CONN 用户 ...

  8. 根据IP获取省市 .

    public class IPAddress { /// <summary> /// 得到真实IP以及所在地详细信息(Porschev) /// </summary> /// ...

  9. 结合Apache和Tomcat实现集群和负载均衡

    http://fableking.iteye.com/blog/360870 TomcatApacheJSP应用服务器Web  本文基本参考自 轻松实现Apache,Tomcat集群和负载均衡,经由实 ...

  10. DateTools时间插件

    import java.text.DateFormat;import java.text.ParsePosition;import java.text.SimpleDateFormat;import ...