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

<!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. Android USB应用开发指南

    调试 USB接口被占用后使用wifi调试模式 详见:https://blog.csdn.net/u013758456/article/details/78911812 开发

  2. django的引入安装

    一 django引入 1 web应用介绍 1 什么是web应用 Web应用程序是一种可以通过Web访问的应用程序,程序的最大好处是用户很容易访问应用程序,用户只需要有浏览器即可,不需要再安装其他软件 ...

  3. https协议 和 Charles 进行https抓包原理

    本文转载自:https://blog.csdn.net/fox64194167/article/details/80387696 1.对称加密 其变成复杂的加密密文发送出去.收信方收到密文后,若想解读 ...

  4. CF-1111C-Creative Snap

    前两天过年,所以两天前的比赛题目现在才来回顾. 这题是一个最平常的递归,加一个剪枝.题目说如果一段距离没有复仇者看守,消耗的能量为A,A一定是正整数.由此可知对于没有复仇者看守的段,不拆一定比拆成两半 ...

  5. python django ORM

    1.在models.py中创创建类 # -*- coding: utf-8 -*- from __future__ import unicode_literals from django.db imp ...

  6. js弱类型转换的知识点

    本文属于转载知识点,以下是原博文作者:不死鸟哇的文章,文章链接:原文JavaScript里什么情况下a==!a为true呢? 今天群里有位同学问了这样一个问题,JavaScript在什么情况下会出现变 ...

  7. Luogu_2434_[SDOI2005]区间

    题目描述 现给定n个闭区间[ai, bi],1<=i<=n.这些区间的并可以表示为一些不相交的闭区间的并.你的任务就是在这些表示方式中找出包含最少区间的方案.你的输出应该按照区间的升序排列 ...

  8. staruml百度网盘下载

    分享staruml官方百度网盘下载 下载时间:2019年9月4日 21:27:37  StarUML(简称SU),是一种创建UML类图,生成类图和其他类型的统一建模语言(UML)图表的工具.StarU ...

  9. 腾讯入股Snap，能救“阅后即焚”的命吗？

    ​ ​   互联网社交的强大包容性,让各种社交形式都能有着较多的受众群体.普适性极广的QQ.微信."脸谱":专攻陌生人社交的陌陌:让人们发布意见的微博--当然也少不了"阅 ...

  10. ES6学习笔记（三）：教你用js面向对象思维来实现 tab栏增删改查功能

    前两篇文章主要介绍了类和对象.类的继承,如果想了解更多理论请查阅<ES6学习笔记(一):轻松搞懂面向对象编程.类和对象>.<ES6学习笔记(二):教你玩转类的继承和类的对象>, ...