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. kvm安装配置使用centos6.5

    # yum -y install kvm virt-* libvirt  && yum -y groupinstall Virtualization 'Virtualization C ...

  2. Kubernetes1.91（K8s）安装部署过程（七）--coredns安装

    为了是集群内的服务能使用dns进行服务解析,集群内需要使用dns服务器,可以按照kube官方dns,即kubedns或者其他的dns,比如coredns, 本例中按照的为coredns,按照简单,编辑 ...

  3. java过滤器filter使用

    一:filter:过滤器,拦截servlet的请求和响应. 1. package jd.com.filter; import javax.servlet.*; import java.io.IOExc ...

  4. python+requests实现接口测试 - cookies的使用 (转载)

    出自:https://www.cnblogs.com/nizhihong/p/6699492.html 在很多时候,发送请求后,服务端会对发送请求方进行身份识别,如果请求中缺少识别信息或存在错误的识别 ...

  5. JAVA之多线程概念及其几种实现方法优劣分析

    1. 多线程 程序:指令集,静态的概念 进程:操作系统调动程序,是程序的一次动态执行过程,动态的概念 线程:在进程内的多条执行路径 Ps:单核的话进程都是虚拟模拟出来的,多核处理器才可以执行真正的多线 ...

  6. HDU 2709 Sumsets 经典简单线性dp

    Sumsets Time Limit: 6000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Sub ...

  7. 删除方法odoo

          ##判断删除情况,不允许删除def unlink(self,cr,uid,ids,context=None): raise osv.except_osv(u'警告!',u'单据不允许删除' ...

  8. HUE的安装

    HUE: Hadoop User Experience 官网地址:http://gethue.com/ Hue官网无法下载,超时. 使用CDH版本安装. 下载地址: http://archive.cl ...

  9. WFP loading 窗口显示 SplashScreen

    public partial class App : Application { protected override void OnStartup(StartupEventArgs e) { Spl ...

  10. 20155323刘威良《网络对抗》Exp7 网络欺诈防范

    20155323刘威良<网络对抗>Exp7 网络欺诈防范 实践目标 理解常用网络欺诈背后的原理,以提高防范意识,并提出具体防范方法. 实践内容 (1)简单应用SET工具建立冒名网站 (1分 ...