水平翻转效果：

<!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. android_开发环境配置

    在学习 Android 之前,需要配置开发环境. 我用的是 eclipse ,简单说下 eclipse 的 Android 的环境配置. 如果没有JDK得先下载:http://www.oracle.c ...

  2. Exception异常规范

    把异常的栈轨迹以String形式返回 /** * 把异常的栈轨迹以String形式返回,而不是直接打印到console * @author King * @time 2015-04-29 * @ret ...

  3. HTML小知识---Label

    今天知道了一个html小知识: <input type="checkbox" id="chkVersion" />                 ...

  4. Java 基础知识总结 (三、运算符)

    三.Operators 运算符 Assignment Operators(赋值运算符) =   +=   -=   %=   *=   /=    <<=     >>=    ...

  5. 【转】 全世界最短的IE判定

    以前最短的IE判定借助于IE不支持垂直制表符的特性搞出来的. var ie = !+"\v1"; 仅仅需要7bytes!讲述外国人是如何把IE的判定从32 bytes一步步缩简成7 ...

  6. 【Maven】Eclipse 使用Maven创建SpringMVC Web项目

    创建环境 系统:win 10 软件:eclipse,maven. 创建步骤 创建一个Maven Web项目,可以参照:[Maven]Eclipse 使用Maven创建Java Web项目 添加spri ...

  7. 如何在命令行里运行python脚本

    python是一款应用非常广泛的脚本程序语言,谷歌公司的网页就是用python编写.python在生物信息.统计.网页制作.计算等多个领域都体现出了强大的功能.python和其他脚本语言如java.R ...

  8. PowerDesigner 建模

    File—New Model—Physical Data Model—Physical Diagram—Model name设置为test,DBMS属性设置为Microsoft SQL Server  ...

  9. php总体架构图

  10. 用函数datepart获取当前日期、周数、季度

    用函数datepart处理就可以了,示例:select datepart(weekday,getdate()) as 周内的第几日select datepart(week,getdate()) as ...