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

<!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. django框架进阶-使用缓存-长期维护

    ###############   django-缓存页面    ############### ########################################### # 全站缓存, ...

  2. maven 多bundle项目

    1 环境 eclipse maven jdk1.8 多bundle项目需要一个父项目(聚合模块),起到聚合其他模块的作用,其他模块的管理工具,不包含实际的代码. 新建maven项目-->Crea ...

  3. 第十六届“二十一世纪的计算”学术研讨会 密西根州立大学教授Anil K. Jain主题演讲

    Biometrics---How Do I Know Who You Are? 密西根州立大学教授Anil K. Jain主题演讲" title="第十六届"二十一世纪的 ...

  4. IOC读取配置文件

    1. 创建一个bean文件 package com.longteng.utils; import org.springframework.beans.factory.annotation.Value; ...

  5. 图论初步-Tarjan算法及其应用

    暑假刷了一堆Tarjan题到头来还是忘得差不多. 这篇博客权当复习吧. 一些定义 无向图 割顶与桥 (划重点) 图G是连通图,删除一个点表示删除此点以及所有与其相连的边. 若删除某点u后G不再连通,那 ...

  6. vue watch和computed的使用场景

    watch 监听某个数据的变化(监听完调用什么函数) 一个数据影响多个数据 (比如:浏览器自适应.监控路由对象.监控自身属性变化) computed 计算后返回新 一个数据受多个数据影响(比如:计算总 ...

  7. rsync auth failed on module xxx

    rsync 报错 "auth failed on module xxx", 一般有三种情况造成: 密码文件格式错误: 服务端密码文件的格式是: user:password 每个一行 ...

  8. JavaScript是如何工作的(一)

    简评:JavaScript 是越来越受欢迎了,很多团队都在采用这些语言工作.前端.后端.嵌入式设备等等,都可以看见它的身影.虽然我们知其然,但又知其所以然吗? 大家应该都知道 JavaScript 是 ...

  9. 【原创】（三）Linux进程调度器-进程切换

    背景 Read the fucking source code! --By 鲁迅 A picture is worth a thousand words. --By 高尔基 说明: Kernel版本: ...

  10. C++扬帆远航——16（猜数字）

    /* * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:guessnum.cpp * 作者:常轩 * 微信公众号:Wor ...