css3之景深

最新推荐文章于 2021-07-29 13:10:10 发布

weixin_30492047

最新推荐文章于 2021-07-29 13:10:10 发布

阅读量347

点赞数

原文链接：http://www.cnblogs.com/hss-blog/p/9770886.html

版权

<!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>

转载于:https://www.cnblogs.com/hss-blog/p/9770886.html

weixin_30492047

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3之景深

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style media="screen"> .box { width:200px; heigh...
复制链接

扫一扫