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

<!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. 牛客-小w的a=b问题

    题目传送门 sol1:老实做,预处理出所有2到1e5的素数,对所有数进行分解质因数,然后对比因子个数.感觉有点卡常,用了快读然后多次优化之后才过的,map也用上了. 素数筛,快速分解质因数 #incl ...

  2. deeplearning.ai 序列模型 Week 2 NLP & Word Embeddings

    1. Word representation One-hot representation的缺点:把每个单词独立对待,导致对相关词的泛化能力不强.比如训练出“I want a glass of ora ...

  3. auto uninstaller 密钥 破解 修复卸载工具

    auto uninstaller 修复卸载工具 密钥注册机破解分享 只可以用于8.8.38,亲测可用 zhAAxzm5Wmmhzomyxyhoahra6AXrzy6X## hzWh6maaa5hmah ...

  4. CodeFroces New Assignment 二分图匹配

    There is a class consisting of n students, in which each one has a number representing his/her perso ...

  5. 关于HTTP协议与HTTP状态码的简要介绍

    在互联网时代HTTP协议的重要性无需多言,对于技术岗位的同学们来说理解掌握HTTP协议是必须的.本篇博客就从HTTP协议的演进.特性.重要知识点和工作中常见问题的总结等方面进行简单的介绍.理解掌握了这 ...

  6. HexoC++第04课 构造析构.md

    C++第04课 构造析构.mdhtml {overflow-x: initial !important;}#write, body { height: auto; } #write, #write h ...

  7. Ionic3学习笔记（七）Storage

    本文为原创文章,转载请标明出处 目录 简介 安装 配置 使用 1. 简介 Storage可以很容易的存储键值对和JSON对象.Storage在底层使用多种存储引擎,根据运行平台选择最佳的存储方式. 当 ...

  8. 导致提前layout的常见情况（通过chrome浏览器自带的控制台可以看到）

    1.通过js获取DOM属性 2.增/删/DOM节点 3.改变浏览器窗口大小 4.改变字体 5.激活css伪类 6.修改DOM的属性,涉及到大小.位置等(该颜色不会激活提前的layout) 7.其他js ...

  9. linux下光标操作

    Ctrl+左右键    单词间跳转 Ctrl+a    跳到行首 Ctrl+e    跳到行尾 Ctrl+u    删除当前光标前的文字 Ctrl+k    删除当前光标后的文字 Ctrl+w    ...

  10. 849. Dijkstra求最短路 I

    给定一个n个点m条边的有向图,图中可能存在重边和自环,所有边权均为正值. 请你求出1号点到n号点的最短距离,如果无法从1号点走到n号点,则输出-1. 输入格式 第一行包含整数n和m. 接下来m行每行包 ...