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. vagrant特性——基于docker开发环境（docker和vagrant的结合）-4-简单例子-有问题

    运行一个十分简单的例子: Vagrant.configure() do |config| config.vm.provider "docker" do |d| d.image = ...

  2. Python os.walk() 方法

    #coding=utf-8 import os #(dirpath, dirnames, filenames)[文件夹路径, 文件夹名字, 文件名] def file_name(file_dir): ...

  3. velocity模板实战

    场景:json配置报文转换遇到的问题:1.json报文转换成map,多节点如何处理?数组如何处理? 2.velocity模板处理数组 3.应用之间rabbitmq通讯map反序列化,数组报错?知识点: ...

  4. CentOS中配置CDH版本的ZooKeeper

    三台CentOS:Host0,Host1,Host2 在三台中分别安装zookeeper-server yum install zookeeper-server -y 修改zookeeper的配置文件 ...

  5. WebView之加载网页时增加进度提示

    上一节讲了一些webview的基本使用以及在记载网页时如何屏蔽掉第三方浏览器,使我们自己开发的程序成为一个微型浏览器.那么这一节将一下在webView加载网页的过程中如何加上进度提示.效果图如下: 主 ...

  6. day07--字符编码、文件处理

    今日内容: 字符编码 文件处理 字符编码: 把字符编码成二进制 各个国家拥有各自的字符编码,这样会导致交流产生问题.所以后面推出了内存使用unicode,硬盘使用UTF-8这个模式 unicode有两 ...

  7. 在testbench从文件读入激励

    在验证verilog逻辑模块功能时候,我们可以从文件中读入激励,便于大规模的验证.文件中的数据我们可以用c++编写程序产生. 第一种读入文件的方法是用系统函数:$readmemb, readmemh, ...

  8. 20155202张旭 Exp6 信息收集与漏洞扫描

    20155202张旭 Exp6 信息收集与漏洞扫描 一.实践目标与内容 1.实践目标: 掌握信息搜集的最基础技能. 具体有: 各种搜索技巧的应用 DNS IP注册信息的查询 基本的扫描技术:主机发现. ...

  9. REST-framework快速构建API--四部曲

    代码目录结构: 一.使用原生APIView 使用rest-framework原生的APIView实现过程: 以url(r'^books/$', views.BookView.as_view(),nam ...

  10. dokuwiki 配置 sendmail 邮件发送

    dokuwiki 发送邮件有2种方式: 一是直接使用 PHP 自带发送功能,需要配置 PHP.ini 文件, 我没试过,可参考官网 https://www.dokuwiki.org/tips:mail ...