css3之 景深

时间  2020-04-28
标签 css3 css 景深 栏目 CSS 繁體版
原文   原文链接 
<!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>
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程