先上一道菜

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         #box {

             position: relative;

             top: 150px;

             left: 600px;

             -webkit-transform-style: preserve-3d;

             -webkit-transform:rotateX(-10deg)  rotateY(400deg);

             -webkit-transform-origin: 100px 100px;

             -webkit-transition: all 5s;

         }

         #box:hover {

             -webkit-transform:rotateX(-10deg)  rotateY(0deg);

         }

         img {

             width: 200px;

             height: 200px;

             position: absolute;

             -webkit-transition: all 3s;

         }

         .img1 {

             -webkit-transform: rotateY(0deg) translateZ(180px);

         }

         .img2 {

             -webkit-transform: rotateY(60deg) translateZ(180px);

         }

         .img3 {

             -webkit-transform: rotateY(120deg) translateZ(180px);

         }

         .img4 {

             -webkit-transform: rotateY(180deg) translateZ(180px);

         }

         .img5 {

             -webkit-transform: rotateY(240deg) translateZ(180px);

         }

         .img6 {

             -webkit-transform: rotateY(300deg) translateZ(180px);

         }

     </style>

 </head>

 <body>

 <div id="box">

     <img src="1.jpg" class="img1 ">

     <img src="2.jpg" class="img2 ">

     <img src="3.jpg" class="img3 ">

     <img src="4.jpg" class="img4 ">

     <img src="5.jpg" class="img5 ">

     <img src="6.jpg" class="img6 ">

 </div>

 </body>

 </html>

效果：

炫的刁炸天  有木有

另外一个效果

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         #box {

             position: relative;

             top: 300px;

             left: 400px;

             -webkit-transform-style: preserve-3d;

             -webkit-transform: rotateX(-15deg) rotateY(-15deg);

             -webkit-transform-origin: 100px 100px;

             -webkit-transition: all 5s;

             /*perspective: 300px;*/

         }

         #box:hover {

             -webkit-transform: rotateX(360deg) rotateY(360deg);

             -webkit-transform-origin: 100px 100px;

         }

         .d {

             position: absolute;

             width: 200px;

             height: 200px;

             font-size: 96px;

             line-height: 200px;

             text-align: center;

             color: black;

             opacity: 0.6;

         }

         #box div:nth-child(1) {

             background: red;

         }

         div:nth-child(2) {

             background: blue;

             -webkit-transform: rotateY(-90deg) translateZ(-100px) translateX(-100px);

         }

         div:nth-child(3) {

             background: yellow;

             -webkit-transform: translateZ(-200px);

         }

         div:nth-child(4) {

             background: darkorange;

             -webkit-transform: rotateY(90deg) translateZ(-100px) translateX(100px);

         }

         div:nth-child(5) {

             background: lawngreen;

             -webkit-transform: rotateX(90deg) translateZ(-100px) translateY(-100px);

         }

         div:nth-child(6) {

             background: fuchsia;

             -webkit-transform: rotateX(90deg) translateZ(100px) translateY(-100px);

         }

         .dd {

             position: absolute;

             width: 400px;

             height: 400px;

             border: 2px solid;

             border-radius: 50%;

         }

         div:nth-child(7) {

             border-color: #33b5e5;

             -webkit-transform: translateZ(-100px) translateY(-100px) translateX(-100px);

         }

         div:nth-child(8) {

             border-color: #f65e3b;

             -webkit-transform: rotateY(-90deg) translateZ(100px) translateY(-100px) translateX(-100px);

         }

         div:nth-child(9){

             border-color: #9933cc;

             -webkit-transform: rotateX(90deg) translateZ(100px) translateX(-100px) translateY(-100px);

         }

     </style>

 </head>

 <body>

 <div id="box">

     <div class="d">1</div>

     <div class="d">2</div>

     <div class="d">3</div>

     <div class="d">4</div>

     <div class="d">5</div>

     <div class="d">6</div>

     <div class="dd"></div>

     <div class="dd"></div>

     <div class="dd"></div>

 </div>

 </body>

 </html>

好，下面正式开始讲，

前言，基础这里就不懂说了，只记下自己的感悟和理解

先看图：

这个就是css3中 3D的坐标轴（注意上方是y的负半轴）

先看下布置界面的代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         *{

             margin: 0;

             padding: 0;

         }

         #box {

             position: relative;

             top: 200px;

             left: 500px;

         }

         .con1 {

             position: absolute;

             width: 200px;

             height: 200px;

             background: red;

             text-align: center;

             line-height: 200px;

             font-size: 96px;

             color: #1a7fdc;

         }

     </style>

 </head>

 <body>

 <div id="box">

     <div class="con1">1</div>

 </div>

 </body>

 </html>

效果：

改装代码：

不说别的，先给#box添加以下代码transform-style: preserve-3d;意思是为其子元素保留3D效果

和transition: all 5s;使其有动画效果

最终代码：

 #box {

             position: relative;

             top: 200px;

             left: 500px;

             transform-style: preserve-3d;

             -webkit-transform-style: preserve-3d;

             transition: all 5s;

             -webkit-transition: all 5s;

         }

开始设置con1的3D效果

代码修改为

 .con1 {

             position: absolute;

             width: 200px;

             height: 200px;

             background: red;

             text-align: center;

             line-height: 200px;

             font-size: 96px;

             color: #1a7fdc;

             transform: translateX(50px);

             -webkit-transform: translateX(50px);

         }

效果不多说，con1向右移动50px

如果改为

 transform: translateY(50px);

con1会向下移动50px (注意这里不是向上)

改为

 transform: translateZ(50px);

并不能看出效果，视觉本身就直着看这z轴，所以任何向Z轴上的移动，都看不出来

先看旋转整体图

这是沿着每个轴的默认旋转的方向，X,Z轴是顺时针，Y轴是逆时针。其实确切说Y轴也是顺时针，只不过转的是负半轴，视觉是逆时针而已

默认旋转基点是50% 50% 50%，可以通过transform-origin来改变

代码改为：

 transform: rotateX(20deg);

效果是高度变小。其实是旋转了。

移动和旋转的结合，详情请看上面的第二个代码 。这里简要说理解。

1，transform:rotateX(20deg) translateX(100px)和 transform:translateX(100px) rotateX(20deg) 两者不同，因为旋转点变化了

2，旋转后，坐标轴也会跟着旋转。如代码

　　

 transform: rotateY(90deg) ;

坐标轴相应会改变为：

这时候如果再添加以下代码

  transform: rotateY(90deg) translateX(100px) ;

图形会向前移动100px，而不是向右

吐槽，真的好难说明，感觉这个3D还是在于理解，不会的话可以自己做个骰子出来，就都会了。

3D动画的更多相关文章

  1. [MISSAJJ原创] UITableViewCell移动及翻转出现的3D动画效果［58同城cell移动效果］

    2015-11-20 很喜欢在安静的状态, 听着音乐,敲着键盘, 和代码们浓情对话, 每一份代码的积累, 都让自己觉得很充实快乐!Y(^_^)Y. 看到58同城app的cell有动画移动出现的特效,很 ...

  2. 8个经典HTML5 3D动画赏析

    HTML5技术已经越来越被我们所接受,特别是一些3D的动画特效.本文介绍的8个HTML5 3D动画并没有特别华丽的界面,但是比较实用,涉及到3D图片.3D图表.3D按钮等方面,一起来看看. 1.HTM ...

  3. HTML5 3D动画效果

    对以前来讲,3D动画拿到网页上展示是一件非常奢侈的事情,第一是浏览器不够先进,第二是大部分只能用flash实现伪3D.HTML5的出现,让实现网页3D动画变得非常简单,当然前提是你不要再使用像IE67 ...

  4. 7款超酷HTML5 3D动画精选应用及源码

    对以前来讲,3D动画拿到网页上展示是一件非常奢侈的事情,第一是浏览器不够先进,第二是大部分只能用flash实现伪3D.HTML5的出现,让实现网页3D动画变得非常简单,当然前提是你不要再使用像IE67 ...

  5. 8款效果惊艳的HTML5 3D动画

    1.HTML5 WebGL水面水波荡漾特效 之前已经向各位分享过一款很逼真的HTML5水波荡漾特效,效果还算不错.今天再向大家分享一款更加给力的HTML5水波动画,画面上是一个大水池,水池底部是一颗大 ...

  6. 如何制作css3的3d动画——以骰子旋转为例，详解css3动画属性

    首先先来看两个用css3实现的炫酷的3d动画效果 1 2 3 4 5   6 你没看错,这个炫酷的效果都是用css3实现的. 下面是动画实现所需要用到的几个css3属性. 1.perspective: ...

  7. 超给力的HTML5 3D动画欣赏及源码下载

    HTML5有着非常巨大的魅力,尤其是CSS3和Cavnas,可以帮助页面渲染得非常炫酷.值得一提的是,利用HTML5的3D特性可以帮助你更加方便地在网页上实现3D动画特效.本文分享的这些HTML5 3 ...

  8. 用CATransform3D实现3D效果和制作简单3D动画

    我们先来看下CATransform3D的头文件 struct CATransform3D { CGFloat m11, m12, m13, m14; CGFloat m21, m22, m23, m2 ...

  9. CSS3中的3D动画实现(钟摆、魔方)--实现代码

    CSS3中的3D动画实现(钟摆.魔方) transition-property 过渡动画属性  all|[attr] transition-duration 过渡时间 transition-delay ...

  10. 【3D动画建模设计工具】Maxon Cinema 4D Studio for Mac 20.0

    图标 Icon   软件介绍 Description Maxon Cinema 4D Studio R20 ,是由德国公司Maxon Computer一款适用于macOS系统的3D动画建模设计工具,是 ...

随机推荐

  1. 【Java】聊聊常用的摘要算法，比如MD5

    摘要算法的特性 摘要算法的目的的将信息进行简单地摘要,将任意长的信息摘要成固定长的信息.比如MD5,将任意长的信息摘要成128位的摘要. 不可逆的,将报文摘要成一段信息后,无法通过摘要信息还原会报文. ...

  2. 深入javascript作用域链到闭包

    我之前用过闭包,用过this,虽然很多时候知道是这么一回事,但是确实理解上还不够深入.再一次看javascript高级程序设计这本书时,发现一起很多疑难问题竟然都懂了,所以总结一下一些理解,难免有错, ...

  3. 我的android学习经历27

    前几天忙着学校的互联网+项目比赛,没有时间学习android和发一些东西,主要是这两天太累了,我是项目组长,好多东西去弄,今天已经交稿去进行初赛. 马上收拾收拾心情,继续我的andorid菜鸟之路 加 ...

  4. 编写一个类A，该类创建的对象可以调用方法f输出小写的英文字母表。然 后再编写一个A类的子类B，要求子类B必须继承类A的方法f（不允许重写）， 子类B创建的对象不仅可以调用方法f输出小写的英文字母表，而且可以调用子 类新增的方法g输出大写的英文字母表。最后编写主类C，在主类的main方法 中测试类A与类B。

    package zimu; public class A { public void f() { for (int i = 97; i <123; i++) { System.out.print ...

  5. STREAM Benchmark

    STREAM Benchmark及其操作性能分析 文/raywill STREAM 是业界广为流行的综合性内存带宽实际性能 测量 工具之一.随着处理器处理核心数量的增多,内存带宽对于提升整个系统性能越 ...

  6. JavaScript语法（一）

    JavaScript 用法 HTML 中的脚本必须位于 <script> 与 </script> 标签之间. 脚本可被放置在 HTML 页面的 <body> 和 & ...

  7. [SAP ABAP开发技术总结]列表屏幕

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  8. 二叉树hdu1710

    学习二叉树,看了两天也不明白,唉!acm之路让我体验到要付出巨大的努力,废话不多说,看我网上找到的代码: 此题题意很明确,给你先序遍历,中序遍历,求后序遍历.但代码就让我找不到东西了. http:// ...

  9. Linux命令工具 top详解

    Linux命令工具 top详解 top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器.top是一个动态显示过程,即可以通过用户按键来不 ...

  10. Linux基础知识之—— nohup命令使程序在后台运行的方法

    在linux操作系统中从后台一直运行某个程序的方法,就是使用nohup命令了. 参照网址:http://www.jb51.net/LINUXjishu/189964.html