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

<!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. Qt Sleep、QCoreApplication::processEvents()（最佳的平衡：一边发送消息，一边睡眠）

    sleep()//秒 msleep()//毫秒 usleep()//微秒 以前为了模拟鼠标点击用过这些函数,可以让进程中断,今天发现我原来的做法其实不对.这组函数会将你当前的线程/进程变为“睡眠”状态 ...

  2. 使用httpclient必须知道的参数设置及代码写法、存在的风险

    转发地址:http://jinnianshilongnian.iteye.com/blog/2089792 结论: 如果使用httpclient 3.1并发量比较大的项目,最好升级到httpclien ...

  3. Redis Client 官方下载地址

    下载地址:https://github.com/caoxinyu/RedisClient 界面 归途(LM)

  4. timber|stain|compensate|

    N-UNCOUNT 木材;原木;树木:林木Timber is wood that is used for building houses and making furniture. You can a ...

  5. python3的数据类型转换问题

    问题描述:在自我学习的过程中,写了个登陆,在input处,希望能够对数据类型进行判断,但是因为python3的输入的数据会被系统默认为字符串,也就是1,1.2,a.都会被系统默认为字符串,这个心塞啊, ...

  6. HDU-1164-Eddy's research I(分解质因数)

    由于这道题目数据范围小,所以属于水题.可以采取暴力的做法来解决. 代码如下: #include"bits/stdc++.h" using namespace std; ; ]; v ...

  7. labview相关内容

    索引数组的用法:https://jingyan.baidu.com/album/90808022e6d0f7fd91c80fd2.html?picindex=1 定时顺序结构用法:http://zon ...

  8. NBA球星的生意经 个人流量化之路

    个人流量化之路" title="NBA球星的生意经 个人流量化之路"> 在国人欢天喜地的庆祝新春佳节之时,大洋彼岸也在进行着让全球篮球迷为之"着魔&quo ...

  9. Memcached笔记——（三）Memcached使用总结

    为了将N个前端数据同步,通过Memcached完成数据打通,但带来了一些新问题: 使用iBatis整合了Memcached,iBatis针对每台server生成了唯一标识,导致同一份数据sql会产生不 ...

  10. classnames

    在React中编写模板时给标签添加class. 如果是固定的className="XX"就可以了. 如果要根据状态值动态应用或去除, 或使用多个class时就麻烦了. 可以使用cl ...