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. BZOJ2079:[POI2010]Guilds(乱搞)

    Description Zy皇帝面临一个严峻的问题,两个互相抵触的贸易团体,YYD工会和FSR工会,他们在同一时间请求在王国各个城市开办自己的办事处.这里有n个城市,其中有一些以双向马路相连,这两个工 ...

  2. pandas中的series数据类型

    import pandas as pd import numpy as np import names ''' 写在前面的话: 1.series与array类型的不同之处为series有索引,而另一个 ...

  3. php大流量高并发解决方案

    一.硬件 提升硬件,影响因素有: 带宽-硬盘读写速度-内存大小-cpu处理速度   二.软件 反向代理负载均衡 mysql : 1.优化你的sql和索引 2.加缓存,memcached,redis 3 ...

  4. docker swarm英文文档学习-2-关键概念

    参考https://docs.docker.com/engine/swarm/key-concepts/ Swarm mode key concepts集群模式关键概念 本主题介绍Docker Eng ...

  5. css3动画功能介绍

    一:过渡动画---Transitions 含义:在css3中,Transitions功能通过将元素的某个属性从一个属性值在指定的时间内平滑过渡到另一个属性值来实现动画功能. Transitions属性 ...

  6. 编程检查d:\test.txt文件是否存在，若在则显示该文件的名称和内容。

    下面放两种方法 老师写的: import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundExcept ...

  7. CentOS中配置Kafka集群

    环境:三台虚拟机Host0,Host1,Host2 Host0:192.168.10.2 Host1:  192.168.10.3 Host2:  192.168.10.4 在三台虚拟机上配置zook ...

  8. timestamp 字段

    项目中由于需求设计,数据库中需要一个timestamp时间戳类型的字段来作为区别数据添加和修改的标识.由于timestamp在SQL SERVER 2005数据库中,不可为空的timestamp类型在 ...

  9. WC 2019 游记 - 败者之低语

    败者之低语 WC 2019 游记 Day -1 看了一圈PKU和THU的题,感觉图像识别真有意思... 感觉非常讲道理,pku还是比thu简单一点的... 听说高二414在thu没有进面试? 震惊!( ...

  10. Flutter - 自动引用pub.dartlang.org/packages上最新的packages

    一般在pubspec.yaml里面引用pub.dartlang.org/packages的packages时,我们都是在包名称后面加上版本号的,谷歌默认也是这样写的. cupertino_icons: ...