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教程