<!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. c++中比较好用的黑科技

    切入正题,上黑科技 一.黑科技函数(常用的我就不写了,例如sort函数) 1.next_permutation(a+1,a+1+n) a[1-n]全排列 2.reverse(a+1,a+1+n) 将a ...

  2. go 创建slice的方式

    1.直接声明:var slice []int 2.new: slice := *new([]int) 3.字面量:slice := []int{1,2,3,4,5} 4.make: slice :=  ...

  3. PDIUSBD12指令

    PDIUSBD12指令 端点描述 PDIUSBD12的端点适用于不同类型的设备,端点可通过[Set mode]命令配置为4种不同的模式,分别为: 模式0(NON-ISO模式):非同步模式 模式1(IS ...

  4. USB概述及协议基础

    USB概述及协议基础 USB的拓扑结构 USB是一种主从结构的系统.主机叫做Host,从机叫做Device(也叫做设备). 通常所说的主机具有一个或者多个USB主控制器(host controller ...

  5. TCP断开连接（四次挥手）

    四次挥手 ACK建立连接之后都为1. 1.A发送释放连接报文段,FIN=1. 2.B收到并回复确认,TCP进入半关闭状态,即此时B能向A发送,但是A无法向B发送数据. 3.当B传输完所有数据之后,发送 ...

  6. Netty源码分析一<序一Unix网络I/O模型简介>

    Unix网络 I/O 模型   我们都知道,为了操作系统的安全性考虑,进程是无法直接操作I/O设备的,其必须通过系统调用请求内核来协助完成I/O动作,而内核会为每个I/O设备维护一个buffer.以下 ...

  7. python深浅拷贝&垃圾回收&上下文管理（with语句）

    深浅拷贝 在Python中使用copy模块用于对象的拷贝操作. 该模块提供了两个主要的方法:浅拷贝 copy.copy() 深拷贝 copy.deepcopy() 1.浅拷贝(copy) 浅拷贝: 不 ...

  8. 大数据软件安装之HBase（NoSQL数据库）

    一.安装部署 1.Zookeeper正常部署 (见前篇博文大数据软件安装之ZooKeeper监控 ) [test@hadoop102 zookeeper-3.4.10]$ bin/zkServer.s ...

  9. 曹工说Spring Boot源码（24）-- Spring注解扫描的瑞士军刀，asm技术实战（上）

    写在前面的话 相关背景及资源: 曹工说Spring Boot源码(1)-- Bean Definition到底是什么,附spring思维导图分享 曹工说Spring Boot源码(2)-- Bean ...

  10. 常用的API和基础算法

    和数学相关 1,java.lang.Math类 abs(x):求绝对值 sqrt(x):求平方根 pow(x,y):求x的y次方 ceil(x):向上取整 floor(x):向下取整 round(x) ...