<!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. deepin15.11安装N卡驱动，实测！！！（可解决N卡电脑关机卡屏）

    前言:deepin(深度)是一款由武汉深之度公司研发的一款适合国人日常学习的linux系统,其UI精美,美过Mac.它对于中国用户的一个亮点就是QQ微信等国软件傻瓜式安装(类似安卓应用商店安装),如果 ...

  2. LSP原则—关于正方形不是长方形

    长方形有二个属性长和宽.并有一个设置长的方法和设置宽的方法,还有一个求面积的方法. 像下面 private int length; private int width; public void set ...

  3. OpenMP Programming

    一.OpenMP概述 1.OpenMP应用编程接口API是在共享存储体系结构上的一个编程模型 2.包含 编译制导(compiler directive).运行库例程(runtime library). ...

  4. Linux中MySQL二进制安装步骤

    MySQL二进制安装步骤 安装依赖环境 [root@node3 ~]# yum -y install libaio 将mysql-5.7.26-linux-glibc2.12-x86_64.tar.g ...

  5. Java 基础（六）：循环

    循环 老生常谈的一个控制流程了,我们在是使用数组和集合的时候,遍历元素的时候经常会用到循环的结构,Java具有非常灵活的三种循环机制: 根据是否知道循环的次数可以为分为while循环,do...whi ...

  6. iviewadmin url 加入 Router base #viewDesignAdmin

    router/index.js const router = new Router({   routes,   base: '/viewDesignAdmin/',   mode: 'history' ...

  7. Jmeter——如何使得token在各线程组间引用的游刃有余

    在以前的博文中,有介绍过,jmeter基本的关联,关联就是将参数在各接口中动态传参,使得接口脚本变得灵活使用,非一次性脚本.今天再来介绍一种jmeter全局变量的设置与使用,可以让脚本运用更丰富,场景 ...

  8. Natas25 Writeup（目录遍历、头部注入）

    Natas25: 打开页面,是一段引文以及可以选择语言的下拉list.查看源码,发现关键代码: function setLanguage(){ //选择语言 /* language setup */ ...

  9. 项目总结&读书笔记

    Python项目 01-函数版ATM 读书笔记 01-Effective Python

  10. Linux网络学习笔记（二）：域名解析(DNS)——以 CoreDNS 为例

    个人笔记,观点不一定正确. 适合对 Kubernetes 有一定了解的同学. 前言 最近一直在学习 Kubernetes,但是手头没有个自有域名,要测试 ingress 就比较麻烦,每次都是手动改 h ...