水平翻转效果：

<!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. LeetCode OJ 150. Evaluate Reverse Polish Notation

    Evaluate the value of an arithmetic expression in Reverse Polish Notation. Valid operators are +, -, ...

  2. mysql学习（二）

    (1)存储过程:存储过程是SQL语句和控制语句的预编译集合,以一个名称存储并作为一个单元处理: (2)存储过程优点:增强SQL语句的功能和灵活性,实现较快的执行速度,减少网络流量: (3)存储过程结构 ...

  3. 开源PLM软件Aras详解四 ItemType的概念

    首先,我们需要了解什么是ItemType,俗称对象类 官方一点就是ItemType是一个用来定义业务对象类的业务对象类 通过ItemType定义的每个业务对象类可以产生各自的实例对象 通过ItemTy ...

  4. SQL语句-批量插入表(表数据插表)

    批量插入表(表数据插表) ****1.INSERT INTO SELECT语句语句形式为:Insert into Table2(field1,field2,...) select value1,val ...

  5. 解决org.openqa.selenium.WebDriverException: Unable to connect to host 127.0.0.1 on port 7055 after 45000 ms org.springframework.beans.BeanInstantiation

    解决方法为将selenium-server-standalone-2.37.0.jar升级至selenium-server-standalone-2.41.0.jar即可. 下载地址:http://s ...

  6. windows 10环境下 使用 msys2 + vs code 配置 c++ 的编译环境

    不太多描述 msys2 与  vs code  ,既然你需要安装 一种语言的编译环境了 ,你肯定对这两个不陌生: 1. 先安装msys2; (下载多少位的msys2就安装多少位的 mingw,本人安装 ...

  7. 清空form表单下所有的input值-------------jquery

    $(':input','#' + formid).not(':button, :submit, :reset').val('').removeAttr('checked').removeAttr('s ...

  8. session的使用方法

    概念:session把客户资料存在服务器中,给浏览器一个加密凭证,每次登录生成的凭证都不相同,浏览器用cookie保存凭证.下次访问时服务器收到凭证后,打开文件读取session信息.session_ ...

  9. android 的touch event分析

    android中的事件类型分为按键事件和屏幕触摸事件,Touch事件是屏幕触摸事件的基础事件,有必要对它进行深入的了解.   一个最简单的屏幕触摸动作触发了一系列Touch事件:ACTION_DOWN ...

  10. 亲子之间，在于看懂，无关耐心zz

    每当有人告诉我:『你对孩子真有耐心!』时,我总会想起我的金项链,当越来越多人说的时候,我就越想找出来,我翻箱倒柜的找,越心急却越找不到,那 一条金项链从我十八岁那一年一直戴在我的脖子上一直到女儿两岁, ...