先放上一段我写的相关代码（可能有一定冗杂代码，请见谅）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background: blue;
            perspective: 600px;
            transform-style: preserve-3d;
        }
        #main {
            width: 400px;
            height: 600px;
            background-image: linear-gradient(to right, #457911 50%, green 50%);
            background-size: 20px 20px;
            margin: 20px auto;
            overflow: hidden;
            transition: 2s;
            transform: rotateX(170deg);
            position: relative;
        }
        #main .shang {
            width: 380px;
            height: 290px;
            border: 1px white solid;
            margin: 9px;
            margin-bottom: 0px;
        }
        #main .xia {
            width: 380px;
            height: 290px;
            border: 1px white solid;
            margin: 9px;
            margin-top: 0px;
        }
        #main .shang .box1 {
            width: 190px;
            height: 120px;
            border: 1px white solid;
            border-top: none;
            margin: 0px auto;
        }
        #main .box1 .box2 {
            width: 70px;
            height: 50px;
            border: 1px white solid;
            border-top: none;
            margin: 0px auto;
        }
        #main .crecle1 {
            width: 70px;
            height: 35px;
            border: 1px white solid;
            border-radius: 0px 0px 35px 35px;
            border-top: none;
            margin: 0px auto;
        }
        #main .crecle2 {
            width: 70px;
            height: 35px;
            border: 1px white solid;
            border-radius: 35px 35px 0px 0px;
            border-bottom: none;
            margin: 100px auto;
        }
        #main .xia .box3 {
            width: 190px;
            height: 120px;
            border: 1px white solid;
            border-bottom: none;
            margin: 0px auto;
        }
        #main .xia .box4 {
            width: 70px;
            height: 50px;
            border: 1px white solid;
            border-bottom: none;
            margin: 70px auto;
        }
        #main .crecle3 {
            width: 70px;
            height: 35px;
            border: 1px white solid;
            border-radius: 0px 0px 35px 35px;
            border-top: none;
            margin: 0px auto;
        }
        #main .crecle4 {
            width: 70px;
            height: 35px;
            border: 1px white solid;
            border-radius: 35px 35px 0px 0px;
            border-bottom: none;
            margin: 100px auto;
            margin-bottom: 0px;
        }
        #main .meixi {
            width: 50px;
            height: 50px;
            background: red;
            position: absolute;
            left: 100px;
            top: 100px;
            font-size: 24px;
            color: white;
            transform: translateY(-200px);
            transition: 3s;
        }
        #main .qiandan {
            width: 50px;
            height: 50px;
            background: green;
            position: absolute;
            left: 100px;
            bottom: 100px;
            font-size: 24px;
            color: white;
            transform: translatey(200px);
            transition: 3s;
        }
        #main .dema {
            width: 50px;
            height: 50px;
            background: pink;
            position: absolute;
            right: 100px;
            top: 100px;
            font-size: 24px;
            color: white;
            transform: translateX(200px);
            transition: 3s;
        }
        #main .eyu {
            width: 50px;
            height: 50px;
            background: yellow;
            position: absolute;
            right: 100px;
            bottom: 100px;
            font-size: 24px;
            color: white;
            transform: translateX(200px);
            transition: 3s;
        }
        #main:hover {
            transform: rotateX(0deg) rotateZ(90deg);
        }
        #main:hover .meixi {
            transform: translateY(0px);
        }
        #main:hover .qiandan {
            transform: translateY(0px);
        }
        #main:hover .dema {
            transform: translateX(0px);
        }
        #main:hover .eyu {
            transform: translateX(0px);
        }
    </style>
</head>
<body>
    <div id="main">
        <div class="shang">
            <div class="box1">
                <div class="box2"></div>
            </div>
            <div class="crecle1"></div>
            <div class="crecle2"></div>
        </div>
        <div class="xia">
            <div class="crecle3"></div>
            <div class="crecle4"></div>
            <div class="box3">
                <div class="box4"></div>
            </div>
        </div>
        <div class="meixi">梅西</div>
        <div class="qiandan">乔丹</div>
        <div class="dema">德玛</div>
        <div class="eyu">鳄鱼</div>
    </div>
</body>
</html>
 
加下来咋们再看下代码的效果图：

　　在逆战班的学习中，通过效果图，咋们可以看出，把鼠标放入图标可以实现一个足球场基于X轴的旋转变化，并且实现了2d效果到3d效果的转变

　　这其中应用到的比较重要的CSS 属性则是transform：rotateX（），这个属性是实现整个平面的一个旋转运动，另外需要扩展了解到的则是不止是这一个，还有transform：rotateY（）；transform：rotateZ（），分别是基于图片的Y轴和Z轴，这个设计到一个3d立体的XYZ轴的理解问题，相当于是一个几何的立体效果，需要一定的空间想象能力。另外一个要看到这个3d效果则是需要添加一个景深的属性

　　perspective:.. 后面跟的是具体的像素单位，是一个大远小近的问题，数据越大则是观看的距离越远，越近则是离图越近，这是一个相对的，相当于可以把这个属性理解为一个3d眼睛，他代替了你的观察视角，通过这个视角咋们在看到图片旋转得到的3d效果。另外一个则是
 
　　扩展：transform-style: preserve-3d;是一个3d的立体空间必须要添加到的，我的这代代码中不需要用到，因为他是没有厚度的，从这个角度来看的话，也是很好理解的，也就是说当你是一个立方体，比如一个正方体，旋转木马之类的，有一定宽高，还有厚度也就是位移的Z轴才需要添加到这个元素。
　　　　transform:translate代表的是一个平面或者物体的位移，有XYZ三个方向   
　　　　transform：scale 代表的是一个平面或者物体的缩小放大增厚，分别是XYZ三个方向
　　　　transform：skew代表的是一个平面或者物体的斜切，有XYZ三个方向，也就是物体或者平面的倾斜问题
 
　　最后总结则是，需要结合后代选择器，:hover，通过鼠标的移入来实现一个具体的变化，当然也可以通过animation来实现，这些我下个博客来具体阐述animation的原理以及效果

CSS--transform相关属性实现2d到3d的具体变化的更多相关文章

  1. css transform旋转属性

    将以下代码复制到本地就可以看到效果: <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  2. 用CSS border相关属性画三角形

    效果 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQva2l3aV9jb2Rlcg==/font/5a6L5L2T/fontsize/400/fill/I0J ...

  3. CSS 定位相关属性 ：position

    我们平时经常用margin来进行布局,但是遇到一些盒子不规律布局时,用margin就有点麻烦了,这个时候我们可以用position. position:参数 参数分析: 一.absolute: 相对父 ...

  4. CSS Transform / Transition / Animation 属性的区别

    back21 Jun 2011 Category: tech Tags: css 最近想UI的动画转到css3能吃进3d加速的属性上面来以加强动画的连贯性.只是对于css几个新加的属性不太熟悉,常常容 ...

  5. CSS Counters 计数属性

    CSS Counters其实就是一计数器,早期在CSS中计数器仅存在于ul和ol元素.如果要使用在div这样的元素上,只能通过list-style-image或者是元素的backgroud-image ...

  6. transform做2d和3d变形（css动画一）

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 有段时间我是没理清transform.translate.transition和animation之间的关 ...

  7. css中的大小、定位、轮廓相关属性

    css中的大小.定位.轮廓相关属性 1.通过height.width属性控制组件大小 height:高度,可以设置任何有效的距离值: width:宽度,可以设置任何有效的属性值: max-height ...

  8. css中的背景、边框、补丁相关属性

    css中的背景.边框.补丁相关属性 关于背景涉及到背景颜色与背景图片 背景颜色background-color即可设定: 背景图片background-image即可设定: 但是背景图片还涉及到其他的 ...

  9. css中的字体及文本相关属性

    css中的字体及文本相关属性 1.字体相关属性 字体主要可以设置color.font-family.font-size.font-size-adjust.font-stretch.font-style ...

随机推荐

  1. UTF虚拟对象

    虚拟对象: 虚拟对象是为了让UFT识别某些不能识别的控件,把这些控件的范围定义为虚拟对象. 新建虚拟对象 管理虚拟对象 创建虚拟对象之后可通过菜单tools-Virutal Objects-Virut ...

  2. Spring定义Bean的两种方式：和@Bean

    前言:    Spring中最重要的概念IOC和AOP,实际围绕的就是Bean的生成与使用. 什么叫做Bean呢?我们可以理解成对象,每一个你想交给Spring去托管的对象都可以称之为Bean. 今天 ...

  3. springboot学习笔记：5.spring mvc(含FreeMarker+layui整合)

    Spring Web MVC框架(通常简称为"Spring MVC")是一个富"模型,视图,控制器"的web框架. Spring MVC允许你创建特定的@Con ...

  4. DSU On Tree——Codeforces 600E(E. Lomsat gelral)

    有这么一类问题,要求统计一棵树上与子树相关的某些信息,比如:在一棵所有节点被染色的树上,统计每棵子树上出现次数最多的颜色编号之和. 很自然的可以想到用DFS序+主席树去求解,但是编码复杂度很高: 然后 ...

  5. Angular开发者指南（六）作用域

    什么是作用域? 作用域是引用应用程序模型的对象. 它是表达式的执行上下文. 作用域以层次结构排列,模仿应用程序的DOM结构,它可以观察表达式和传播事件. 作用域的特征 Scope提供API($watc ...

  6. 深入JVM内核--GC算法和种类

    GC的概念 Garbage Collection 垃圾收集 1960年 List 使用了GC Java中,GC的对象是堆空间和永久区 引用计数法 老牌垃圾回收算法 通过引用计算来回收垃圾 使用者 CO ...

  7. telnet不是内部或外部命令的问题解决

    在windows DOS 命令窗口中输入telnet命令,出现如下提示信息:     可能是没有安装telnet客户端的原因,又得开始捣鼓了  www.2cto.com     依次点击"开 ...

  8. openssl内存分配，查看内存泄露

    openssl内存分配 用户在使用内存时,容易犯的错误就是内存泄露.当用户调用内存分配和释放函数时,查找内存泄露比较麻烦.openssl提供了内置的内存分配/释放函数.如果用户完全调用openssl的 ...

  9. <SDOI2009>学校食堂

    我. 调了快一天 因为一个位置错误的感叹号 :-) !!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 狗dp #include<cstdio> #include<cstr ...

  10. Python建立web静态服务器

    原文地址:http://www.bugingcode.com/blog/python_html_web_server.html python作为工具,提供了很多好用的命令,比如有时候突然需要建立一个解 ...