<!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. XCTF---easyjava的WriteUp

    一.题目来源     题目来源:XCTF题库安卓区easyjava     题目下载链接:下载地址 二.解题过程     1.将该apk安装进夜神模拟器中,发现有一个输入框和一个按钮,随便输入信息,点 ...

  2. 一起了解 .Net Foundation 项目 No.18

    .Net 基金会中包含有很多优秀的项目,今天就和笔者一起了解一下其中的一些优秀作品吧. 中文介绍 中文介绍内容翻译自英文介绍,主要采用意译.如与原文存在出入,请以原文为准. Protobuild Pr ...

  3. Python基础编程题100列目录

    实例001:数字组合 实例002:"个税计算" 实例003:完全平方数 实例004:这天第几天 实例005:三数排序 实例006:斐波那契数列 实例007:copy 实例008:九 ...

  4. 【工具】Intel HLS工具

    目前新版本的Quartus 软件 都自带有  HLS 工具,比如 18.1版本安装以后,HLS相关文件夹如下: HLS工具 也可以单独下载: https://www.intel.com/content ...

  5. php7连接mysql8

    最近因为剁手买了mac所以在mac上搭建lnmp环境. 刚好看到mysql从5.7跳到8,性能据说快上一倍,果断尝鲜! lnmp基本都弄好了,但是到用php连接Mysql这一步出了岔子. 出错原因: ...

  6. $api 回调函数then应用

    getReceiveListAPI (param) { return new Promise(resolve => { let params = { // idCard: this.idCard ...

  7. 增删改查-java（新手）

     PreparedStatement: 方法: Connection: 方法:  实例: 1.查询: package cn.chuang.JdbcDome; import java.sql.*; pu ...

  8. 通达OA rce复现

    通达OA下载:链接:https://pan.baidu.com/s/1c0P-M-IyY5VxfH5d0qKHsQ 提取码:l0pc 漏洞原因:未授权文件上传 + 文件包含(利用nginx日志也可以g ...

  9. css3实现旋转卡片

    基本思路:父div使用相对定位包裹着两个子元素,子元素使用绝对定位,定位在同一个位置,初始时一个div翻转到后面隐藏,另一个在前面显示,当鼠标悬停在父元素上时,前面的子元素旋转180度,到背面隐藏:背 ...

  10. mysql字段数据类型、设置严格模式

    表操作 今日内容 1.数据类型 建表的时候,字段都有对应的数据类型 整型 浮点型 字符类型(char与varchar) 日期类型 枚举与集合 2.约束条件 primary key unique key ...