<!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. 原来rollup这么简单之 rollup.generate + rollup.write篇

    大家好,我是小雨小雨,致力于分享有趣的.实用的技术文章. 内容分为翻译和原创,如果有问题,欢迎随时评论或私信,希望和大家一起进步. 分享不易,希望能够得到大家的支持和关注. 计划 rollup系列打算 ...

  2. 如何在vue中修改动态标签中的样式和修改组件库样式

    vue中修改动态标签中的样式和修改组件库样式 因为vue中的标签在渲染的时候,都会给标签加上id 所以你想在<style lang="scss" scoped>直接修改 ...

  3. 【简说Python WEB】视图函数操作数据库

    目录 [简说Python WEB]视图函数操作数据库 系统环境:Ubuntu 18.04.1 LTS Python使用的是虚拟环境:virutalenv Python的版本:Python 3.6.9 ...

  4. Log4j不写入日志文件排错记录

    背景: 之前用 log4j一直设置的输出到控制台.今天由于job任务出现了异常,因为是异步的,没办法在控制台看错误信息了,于是乎决定把日志打印到文件里面.然后就找了篇博客配置了下.但是配置完后,怎么也 ...

  5. Symantec NBU :Unable to retrieve version of the server xxx.xxx.xxx

    Symantec NetBackup  是赛门铁克收购的veritas公司的一款产品,该产品功能强大,据称堪称备份界的鼻祖. 其具体原理和备份方式可见:https://blog.51cto.com/s ...

  6. CBV和APIView源码分析

    CBV源码分析 查看源码的方式,先查看自身,没有去找父类,父类没有就去找父父类... 自己定义的类 class Author(View): def get(self,request): back_di ...

  7. Ansible权威指南-读书笔记

    2 Ansible基础元素介绍 2.1 ansible 目录结构介绍 2.2 ansible 配置文件解析 配置文件解析顺序:当前命令执行目录-->用户家目录下的.ansible.cfg--&g ...

  8. B - Yet Another Palindrome Problem的简单方法

    You are given an array aa consisting of nn integers. Your task is to determine if aa has some subseq ...

  9. Nuget多项目批量打包上传服务器的简明教程

    本篇不会介绍Nuget是什么,如何打包上传Nuget包,怎么搭建私有Nuget服务器.这些问题园子里都有相应的文章分享,这里不做过多阐述.另外本文假设你已经下载了Nuget.exe,并且已经设置好了环 ...

  10. 最通俗易懂的 HashMap 源码分析解读

    HashMap 作为最常用的集合类之一,有必要深入浅出的了解一下.这篇文章会深入到 HashMap 源码,刨析它的存储结构以及工作机制. 1. HashMap 的存储结构 HashMap 的数据存储结 ...