3D变换的x，y，z轴是分别效果是：

x轴旋转的话，就是头和脚进行转动

y轴旋转的话，就是左右手进行转动

z轴旋转的话，就是整个身体平铺在旋转。

上面是针对旋转的意思去，但是对于其他的类似一样，就是这样子去理解x，y，z轴的在哪里的

transform: rotateX(360deg);

transform: rotateY(360deg);

transform: rotateZ(360deg);

变换跟2D同理

最主要的区别是透视视图“景深”

<!--景深的作用：
1、让3D场景有近大远小的效果（就是肉眼距离屏幕的距离）
2、是一个不可以继承的。但他可以作用于后代元素（不是作用于本身的）
原理：
景深越大，灭点越远，元素变形更小
景深越小，灭点越近，元素变形更大

灭点：灭点就是你看到的尽头
景深基点：视角的位置
组合变换的话，放本身的话，一定要放在首位

如果要让景深有效果，又想放在本身的元素上，就需要进行组合处理。例如：

transform:perspective(100px) rotateX(360deg) ;

总体代码如图所示：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            *{

                margin: 0;

                padding: 0;

            }

            #wrap{

                width: 400px;

                height: 400px;

                position: absolute;

                top: 50%;

                left: 50%;

                margin-left: -200px;

                margin-top: -200px;

                border: 1px solid black;

                /*perspective: 100px;*/

            }

            #inner{

                width: 200px;

                height: 200px;

                position: absolute;

                top: 50%;

                left: 50%;

                margin-left: -100px;

                margin-top: -100px;

                border: 1px solid pink;

                border-radius: 50%;

                text-align: center;

                line-height: 200px;

                font-weight: bold;

                transition: 2s;

            }

            #wrap:hover #inner{

                /*transform: rotateX(360deg);

                transform: rotateY(360deg);

                transform: rotateZ(360deg);

                transform: scaleX(2);

                transform: scaleZ(2);*/

                /*transform: translateZ(100px);*/

                transform:perspective(100px) rotateX(360deg) ;

            }

        </style>

    </head>

    <body>

        <div id="wrap">

            <div id="inner">

                Rainbow

            </div>

        </div>

    </body>

</html>

-->

css之3D变换的更多相关文章

  1. 介绍css 的3D 变换（3D transform）

    https://desandro.github.io/3dtransforms/docs/card-flip.html ---------------------------------------- ...

  2. CSS3之3D变换实例详解

    CSS3的3D效果很赞,本文实现简单的两种3D翻转效果.首先看效果和源代码,文末是文绉绉的总结部分^_^ 以下CSS代码为了简洁没有添加前缀,请视情况自行添加(自动化时代推荐使用其他的一些方法,如gu ...

  3. CSS3 3D变换

    可以这么说,3D变换是基于三维坐标系的.以下是“盗用”的图 CSS3中的3D变换主要包括以下几个功能函数: 3D位移:包括translateZ()和translate3d(): 3D旋转:包括rota ...

  4. CSS3 3D变换实例 滚动的正方体

    笔记: 2D变换 transform 位移   translateX() translateY()  简写:translate(X值,Y值)  正值向右,负值向左 旋转 rotate()  rotat ...

  5. [UWP-小白日记16]UWP中的3D变换API

    原文:[UWP-小白日记16]UWP中的3D变换API 还没开始 好久没写博客了,再来开坑. 正文 Transform3D:“这个和CSS的3D好像的说” PerspectiveTransform3D ...

  6. CSS3之3d变换与关键帧

    3d变换是在transform基础上实现的 transform-style:preserve-3d; 建立3d空间 perspective:; 景深(设置用户看的距离) perspective-ori ...

  7. 关于ios 3D变换 CGAffineTransformIdentity

    每次做完3D变换以后,重新设置view的frame时,记得用CGAffineTransformIdentity 对3D变换进行还原,否则将会影响frame.当你对view进行3D变换后,重新设置vie ...

  8. OpenGL学习进程（12）第九课：矩阵乘法实现3D变换

    本节是OpenGL学习的第九个课时,下面将详细介绍OpenGL的多种3D变换和如何操作矩阵堆栈.     (1)3D变换: OpenGL中绘制3D世界的空间变换包括:模型变换.视图变换.投影变换和视口 ...

  9. [OpenGL ES 03]3D变换：模型，视图，投影与Viewport

    [OpenGL ES 03]3D变换:模型,视图,投影与Viewport 罗朝辉 (http://blog.csdn.net/kesalin) 本文遵循“署名-非商业用途-保持一致”创作公用协议 系列 ...

随机推荐

  1. ES6标准入门之数值的拓展解说

    ES6提供了二进制和八进制数值的新写法,分别用前缀0b(或0B)和0o(或0O)表示. 0b111110111 === 503                    // true 0o767 === ...

  2. 用BCP从SQL Server 数据库中导出Excel文件

    BCP(Bulk Copy Program)是一种简单高效的数据传输方式在SQL Server中,其他数据传输方式还有SSIS和DTS. 这个程序的主要功能是从数据库中查询Job中指定step的执行信 ...

  3. 使用filter对请求设置编码

    一.复习 加强方法: 1)继承 2)装饰模式 3)动态代理. 使用装饰模式: 1)要求装饰者和被装饰者实现同一个接口或者继承同一个类. 2)装饰者要求被装饰者的引用. 3)对于要加强的方法进行加强,对 ...

  4. jsp二（指令）

    一.jsp动作标签: 1)<jsp:forward> 请求转发 相当于之前的request.getRequestDispatcher(..).forward(..); <!--jsp ...

  5. Oracle 视图view

    在我看来,oracle的视图就是用于将多个表的关联查询结果映射成[临时表],视图与系统表中的数据是实时对应的. 我们可以像操作表的查询一样来操作视图查询. 视图写法: CREATE OR REPLAC ...

  6. UDP穿越NAT原理(p2p)

    转载自:http://blog.csdn.net/ldd909/article/details/5979967 论坛上经常有对P2P原理的讨论,但是讨论归讨论,很少有实质的东西产生(源代码).在这里我 ...

  7. [FQ]Tor + Chrome + PAC 尝试 FQ

    记录一次比较成功的FQ经历 1.从Tor官网下载最新的Tor browser,速度较慢可以从文末给出的链接中下载. 2.安装Tor browser. 3. Tor网络设置 3.1 那个描述与你的情况最 ...

  8. 如何取得Oracle并行执行的trace

    如何取得Oracle并行执行的trace: ALTER SESSION SET tracefile_identifier='10046_PROD';ALTER SESSION SET max_dump ...

  9. python 优雅地实现插件架构

    近日,决定用 python 实现插件架构,于是上 stackoverflow 逛了一下,在这里发现一段代码,非常喜欢. 提醒各位大侠注意,我对这段代码作了一点小小的改动:原 PLUGINS 是 lis ...

  10. cocos2d-x学习记录2——CCAction动作

    CCAction能够使CCNode运动起来,能够呈现出多种多样的动作.这些动作能够改变其运动方向.形状.大小.旋转等. 同时,还可利用CCCallFunc.CCCallFuncN.CCCallFunc ...