水平翻转效果：

<!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_layout 布局（一）

    今天主要学习了Android 的layout布局. Android layout 布局一般分为五种: LinearLayout (线性布局) :子组件按照垂直或者水平方向来布局. RelativeLa ...

  2. asp.net GDI+绘制矩形渐变

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  3. nullcon HackIM 2016 -- Programming Question 2

    Your simple good Deeds can save you but your GREED can kill you. This has happened before. This gree ...

  4. Maven重复类的解决

    1. 设置仓库,我的Settings里设置使用了公司的Nexus <?xml version="1.0"?> <settings xmlns="http ...

  5. CSS样式之语法

    选择符 选择符 {属性1:属性值1;属性2:属性值2} 选择符(selector):指定样式适用的标签,除指定标签外,样式不起作用 属性:样式的关键字 属性值:描述样式的值: 格式:属性与属性之间使用 ...

  6. Oracle每天自学一点点 常用Oracle

    创建表空间:create tablespace crmtb datafile 'F:\Oracle\oradata\crmtb.dbf' size 100M;删除表空间:DROP TABLESPACE ...

  7. UWP深入学习四:动画及图像

    Storyboarded animations Key-frame animations and easing function animations 缓动函数 缓动函数支持你将自定义数学公式应用到动 ...

  8. weborm 简单控件

    Label - 显示文字,编译后是spanLiteral - 显示文字,编译后没有形成元素 只是文字 一般用来输出 js代码内容 TextBox - 文本框 TextMode -普通文本框 singl ...

  9. C++ 优先队列

    C++ 优先队列 #include <queue> priority_queue<Type, Container, Functional>:Type为数据的类型,Contain ...

  10. Windows升级(安装)MySQL 5.7.x 解压版 + 异常处理

    说明 版本升级(个人原因): 因为5.5的版本不能执行如下sql语句,故卸装5.5升级安装mysql-5.7.15: `timeName` timestamp(3) NULL DEFAULT NULL ...