<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title></title>

    <style media="screen">

    .box {

      width:200px;

      height:200px;

      background: #CCC;

      border:1px solid black;

      margin:100px auto 0;

      transform:perspective(700px) rotateX(60deg) rotateZ(40deg);

      /*给父级去掉限制*/

      transform-style: preserve-3d;

    }

    .child {

      width:100%; height:100%; background:yellow; transition:1s all ease;

      transform: translateZ(0px);

      transform-style: preserve-3d;

    }

    .child:active {transform: translateZ(100px)}

    .child2 {

      width:100%; height:50%; background:green; transition:1s all ease;

      transform: translateZ(0);

    }

    .child2:active {transform: translateZ(50px);}

    </style>

  </head>

  <body>

    <div class="box">

      <div class="child">

        <div class="child2">

          文字

        </div>

      </div>

    </div>

  </body>

</html>
CSS3

transform 3D：

1.X/Y/Z坐标轴

2.透视

--------------------------------------------------------------------------------

3d transform——perspective、preserve-3d

1.perspective——自己    视觉效果

  *只给最外层加一次

2.preserve-3d——子元素  子元素可以脱离父级

  *每个需要子级出来的地方都得加

--------------------------------------------------------------------------------

transform-3D

WebGL

--------------------------------------------------------------------------------

移动端开发？

真正的柔软——CSS4

--------------------------------------------------------------------------------

移动端开发

1.移动端布局——适配

2.touch

3.库

4.响应式

--------------------------------------------------------------------------------

移动端适配：

1.viewport-可视区

  最早-手机要照顾PC端

2.盒模型

  普通盒子.width=width + padding + border

3.flex-弹性盒模型

  i.具备border-box的能力

  ii.对border、padding和margin都好用

  iii.跟max-width、min-width配合

4.rem

  单位：px、%、em、...

  px: 绝对

  em: 相对，自身字体

  rem:相对，root字体

  rem——相对于html的font-size

  总结：在不同的屏幕尺寸下，只需要调整HTML元素的font-size

    方便、性能高

  一切尺寸都用rem/%

--------------------------------------------------------------------------------

1.做一个移动端页面

2.响应式

3.touch

...

<div style="width:20rem;"></div>

css3之 景深的更多相关文章

  1. css3之景深

    perspective属性:(目前仅仅支持-webkit-perspective属性,视点距离) 值:number perspective-origin属性:(视点位置) 值:number% numb ...

  2. CSS3景深-perspective

    3D视图正方体: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  3. 三分钟学会用 js + css3 打造酷炫3D相册

    之前发过该文,后来不知怎么回事不见了,现在重新发一下. 中秋主题的3D旋转相册 如图,这是通过Javascript和css3来实现的.整个案例只有不到80行代码,我希望通过这个案例,让正处于迷茫期的j ...

  4. 【CSS3进阶】酷炫的3D旋转透视

    之前学习 react+webpack ,偶然路过 webpack 官网 ,看到顶部的 LOGO ,就很感兴趣. 最近觉得自己 CSS3 过于薄弱,想着深入学习一番,遂以这个 LOGO 为切入口,好好研 ...

  5. html5和css3学习笔记

    HTML5针对移动端,移动端的浏览器主要是chrome,是webkit内核; app(applicatin):应用; native app:原生的app sadsadsadad 单标签可以省略结尾标记 ...

  6. CSS3打造3D效果——perspective transform的深度剖析

    声明:此篇博文虽是自己手写,但大量资源取自 张鑫旭 的博文.想看更详细 更专业的剖析请看张鑫旭的博文. 昨天对css3的transform做了初步的分析和认识,突然看到perspective属性,调了 ...

  7. CSS3基础03（3D②） 求粉丝

    3 D (3.1)rotateY 围绕着Y轴进行旋转 (1)正数是(站在右边推),负数是(站在左边推) (2.1)定义元素背过去是否可见 backface-visibility: visible|hi ...

  8. css3、html5学习笔记

    2016/12/14 ----认真看完绝对对你有帮助 HTML5针对移动端,移动端的浏览器主要是chrome,是webkit内核; app(applicatin):应用; native app:原生的 ...

  9. GJM ：JS + CSS3 打造炫酷3D相册 [转载]

    感谢您的阅读.喜欢的.有用的就请大哥大嫂们高抬贵手"推荐一下"吧!你的精神支持是博主强大的写作动力以及转载收藏动力.欢迎转载! 版权声明:本文原创发表于 [请点击连接前往] ,未经 ...

随机推荐

  1. 【Python challenge】通关代码及攻略（0-11）

    前言: 最近找到一个有关python的游戏闯关,这是游戏中的思考及通关攻略 最开始位于:http://www.pythonchallenge.com/pc/def/0.html 第0关 题目分析 提示 ...

  2. WEB渗透 - XSS

    听说这个时间点是人类这种生物很重要的一个节点 cross-site scripting 跨站脚本漏洞 类型 存储型(持久) 反射型(非持久) DOM型 利用 先检测,看我们输入的内容是否有返回以及有无 ...

  3. guava限流器RateLimiter原理及源码分析

    前言 RateLimiter是基于令牌桶算法实现的一个多线程限流器,它可以将请求均匀的进行处理,当然他并不是一个分布式限流器,只是对单机进行限流.它可以应用在定时拉取接口数据, 预防单机过大流量使用. ...

  4. 5分钟使用NetModular 完成通讯录 App 开发

    原版连接:https://www.cnblogs.com/shanyou/p/12520894.html NetModular(后文简称NM)是 OLDLI 堪称艺术品级的应用开发框架,它基于经典领域 ...

  5. Flutter配置环境报错“PKIX path building failed: sun.security.provider.certpath.SunCertPathBuilderException: unable to find valid certification path to requested target”

    背景:最近看了很多Flutter漂亮的项目,想要尝试一下.所有环境都搭建好之后,按照文档一步一步配置(抄袭),但始终报如下图错误. PKIX path building failed: sun.sec ...

  6. Python中常见的报错名称

    Python中常见的报错名称 1.SyntaxError 语法错误.看看是否用Python关键字命名变量,有没有使用中文符号,运算符.逻辑运算符等符号是不是使用不规范. 2.IndentationEr ...

  7. GPP(Group Policy Preference)组策略偏好漏洞利用

    总结与反思: GPP中管理员给域成员添加的账号信息存在xml,可以直接破解拿到账号密码. Windows Sever 2008 的组策略选项(GPP)是一个新引入的插件,方便管理员管理的同时也引入了安 ...

  8. hdu3665Floyd解法

    题目链接:http://icpc.njust.edu.cn/Problem/Hdu/3665/ Floyd是经典的dp算法,将迭代过程分成n个阶段,经过n个阶段的迭代所有点对之间的最短路径都可以求出, ...

  9. idea的ktorm框架代码生成器插件

    *:first-child { margin-top: 0 !important; } .markdown-body>*:last-child { margin-bottom: 0 !impor ...

  10. editplus软件使用技巧

    1.文本文件的特点 注:不针对editplus这个软件,对于其他的文本文件处理软件也同样适用. 文本文件就是不包含其它文字格式(比如字体,字号,对齐,行间距等)以及富文本(比如图片,表格等)的一种纯文 ...