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. Postman-断言和Runner

    断言(部分) // 推荐用全等 ===,确保类型和值都一致 tests['Status code is 200'] = responseCode.code === 200; //判断响应结果是否是20 ...

  2. MVC 在action方法中获取当前action的控制器名和action名

    如何在某个action方法中获取它所在的控制器和action名称呢. string controllerName = Request.RequestContext.RouteData.Values[& ...

  3. 警惕ASP.NET MVC中的ValidateInputAttribute

    最近在做一个ASP.NET MVC项目的时候发现,有一个Controller的Action死活都没法接收到从客户端提交过来的Html表单请求和数据,后来才发现是因为默认情况下ASP.NET MVC在执 ...

  4. Dsu on Tree

    这个属于一种技巧,可以解决类似于子树询问无修改可离线的问题,一些点分治的问题也可以用Dsu on Tree解决,并且常数较小,代码复杂度低,很具有可写性. 整体上的意思就是继承重儿子的信息,暴力修改轻 ...

  5. 大数据入门第二十四天——SparkStreaming（一）入门与示例

    一.概述 1.什么是spark streaming Spark Streaming is an extension of the core Spark API that enables scalabl ...

  6. Android应用安全之脆弱的加密

    程序员希望通过加密来提升程序的安全性性,但却缺乏专业的密码学背景知识,使得应用对数据的保护非常薄弱.本文将介绍可能出现在Android应用中的一些脆弱的加密方式,以及对应的攻击方法. 造成脆弱加密的主 ...

  7. python基础1之python介绍、安装、变量和字符编码、数据类型、输入输出、数据运算、循环

    开启python之路 内容概要: 一.python介绍 二.安装 三.第一个python程序 四.变量和字符编码 五.用户输入 六.数据类型 七.一切皆对象 八.数据运算 九.if else 流程判断 ...

  8. 20155316 《网络对抗》Exp8 Web基础

    实验内容 实验1:Web前端HTML 能正常安装.启停Apache.理解HTML,理解表单,理解GET与POST方法,编写一个含有表单的HTML. 1.开启Apache服务 思路:使用service ...

  9. Android开发——进程间通信之Bundle和文件

    0.  前言 不论是Android还是其他操作系统,都会有自己的IPC机制,所谓IPC(Inter-Process Communication)即进程间通信.首先线程和进程是很不同的概念,线程是CPU ...

  10. libgdx判断actor与circle是否重叠

    实质是检测矩形与circle是否重叠 基本函数,判断点是否在circle中 public static boolean IsInside( float x, float y, Circle circl ...