一、前言
上一节，介绍了基础的CSS3 3D动画原理实现，也举了一个小小的例子来演示，但是有朋友跟我私信说想看看一些关于CSS3 3D的实例，所以在这里为了满足一下大家的需求，同时也为了以后能够更好的巩固CSS3 3D的知识，所以在这里写下这篇博文，希望能够帮助你更好的理解3D的制作和实现原理，同时也欢迎各位小伙伴对文中的错误给予指正
二、入门案例分析
这里先说一说我的规划，我打算先从入门级的案例入手，然后依次递推，最后要达到的效果是，理解完所有的例子的设计思路，基本上CSS3-3D制作就能够随心所欲。
1、矩形图片翻滚效果
这个效果比较简单，所以在这里就不多做解释了，先来复习一下上一节说的要创建一个3D环境，我们需要创建一个“灯光”，“舞台”，“演员”(相当于perspective、preserve-3d、image)，不清楚的小伙伴请看这里,具体的代码如下：
XML/HTML Code复制内容到剪贴板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div div img{
width:300px;
height:300px;
position:absolute;
/* -webkit-transition: all 0.8s; */
}
div div{
-webkit-transition: all 1s;
}
#img1{
-webkit-transform: translateZ(150px);
/* -webkit-transition: all 0.8s; */
}
#img2{
-webkit-transform: rotateX(-90deg) translateZ(150px);
新闻热点
疑难解答
