translate3d(x,y,z)在頁面佈局中的使用

阿新 • • 發佈：2019-01-27

很快，又到了月底，最近遇到了一個問題，弄了蠻久，做下總結，溫故知新！！！

這裡寫圖片描述
這是餓了麼的商家頁面，底層的購物車頁面(父層)是使用fixed佈局的，固定在下方。購物車詳情頁(子層)預設顯示，當點選父層的時候，子層就會展開。

-----------HTml程式碼
<body>
  <div class="shopCart">
    <div class="content">我是購物車層</div>
    <div class="detail" style="display:none">我是購物車詳情頁（彈出層）
      1111111111111111111111111 

      1111111111111111111111111
      1111111111111111111111111
      我是購物車詳情頁（彈出層）</div>
  </div>
</body>

---------------樣式程式碼
.shopCart{
position: fixed;
      bottom:0;
      left: 0;
      width:100%;
      height:50px;
      background: #000;
    }
    .content {
      color: #fff;
    }
    .detail 
 {
      position: absolute;
      top:0;
      left:0;
      width:120px;
      color: #ff0b20;
      /*transform: translate3d(0,-100%,0);*/   //後續新增
    }
  </style>

--------------js程式碼
<script>
    window.onload = function(){
      var shopcart = document.querySelector('.shopCart');
      var detail = document.querySelector('.detail' 
);
      shopcart.onclick = function(){
        detail.style.display='block';
      }
    }

1.在沒有新增 transform: translate3d(0,-100%,0);的時候，效果如下，子層是以父層來定位的，也只能在父層內部顯示。
2.添加了transform: translate3d(0,-100%,0);的時候，效果如下：子層就會超出父層區域
3.注意：(1)transform: translate3d(0,-100%,0);中的-100%，是為了讓子元素以自身內容，往上撐開自己的文字內容。

好了，就這麼多了，希望對小夥伴們有用！！2017.10.31

translate3d(x,y,z)在頁面佈局中的使用

很快，又到了月底，最近遇到了一個問題，弄了蠻久，做下總結，溫故知新！！！這是餓了麼的商家頁面，底層的購物車頁面(父層)是使用fixed佈局的，固定在下方。購物車詳情頁(子層)預設顯示，當點選父層

python中輸入三個整數x,y,z，請把這三個數由小到大輸出。

輸入三個整數x,y,z，請把這三個數由小到大排序,再把陣列由大到小排序，再輸出最大值和最小值！ #定義一個空陣列 numbers = [] #迴圈遍歷，下面的4是控制迴圈次數 for i in range(4): if i > 0: x = int(input(f"請輸入

關於opengl中的三維矩陣平移，矩陣旋轉，推導過程理解 OpenGL計算機圖形學的一些必要矩陣運算知識 glTranslatef（x,y,z）glRotatef(angle,x,y,z)函式詳解

原文作者：aircraft 原文連結：https://www.cnblogs.com/DOMLX/p/12166896.html 為什麼引入齊次座標的變換矩陣可以表示平移呢？ - Yu Mao的回答 - 知乎 https://www.zhihu.com/

‘，’之後要留空格，如 Function(x, y, z)

user names fun return 調用函數 char float ace out ‘，’之後要留空格，如 Function(x, y, z)。如果‘;’不是一行的結束符號，其後要留空格，如 for (initialization; condition; upda

給你講講前端頁面佈局中float的那些事

寫頁面佈局的過程中，浮動是大家經常用的屬性。在好多的排版佈局中都是用的的浮動比如說下面這些地方都是應用到了浮動。在我學習浮動的時候可是熬壞了腦筋，在這裡我分享一下我對浮動這塊知識的總結。一、浮動的定義使元素脫離文件流，按照指定的方向（左或右發生移動），直到它的外邊緣碰到包含框或另一

題目：兩個乒乓球隊進行比賽，各出三人。甲隊為a,b,c三人，乙隊為x,y,z三人。已抽籤決定比賽名單。有人向隊員打聽比賽的名單，a說他不和x比，c說他不和x,z比，請程式設計序找出三隊賽手大的名單。

通過迴圈巢狀安排對戰順序，再用if語句判斷避免參賽的隊員重複，最後通過題目要求篩選出符合題意的對手。 public class Test18 { public static void main(String[] args) { char a,b,c; for(a = 'x'; a &l

（負值）-margin在頁面佈局中的應用

主要有以下幾種情況：一、左右列固定，中間列自適應佈局；此例適用於左右欄寬度固定，中間欄寬度自適應的佈局。由於網頁的主體部分一般在中間，很多網頁都需要中間列優先載入，而這種佈局剛好滿足此需求。二、去除列表右邊框；專案中經常會使用浮動列表展示資訊，為了美觀通常為每個列表之間設

C#獲取感JY901M_485姿態傳器的X Y Z角度

1.JY901M_485姿態傳器的控制和資料協議說明 1.1 讀取指令和資料回傳格式 1.2 xyz軸角度所在暫存器地址 2 拼接獲取xyz軸角度指令 0x50 0x03 0x00 0x3d 0x00 0x3e 0x00 0x3f 0x00 0x33 0x00 0x00 3 編寫程

unity 沿著軸（x,y,z）拖動物體

using System.Collections; using System.Collections.Generic; using UnityEngine; //選擇軸向 public enum axisPostion { x_dir, &nb

輸入三個整數x,y,z，請把這三個數由大到小輸出

輸入三個整數x,y,z，請把這三個數由大到小輸出 x = int(input('第一個整數x：')) y = int(input('第二個整數x：')) z = int(input('第三個整數x：')) # f方法1 max = x if y > x: if y >

python練習：編寫一個程序，檢查3個變量x,y,z，輸出其中最大的奇數。如果其中沒有奇數，就輸出一個消息進行說明。

int elif pri 檢查說明一個數 print 下一個 == python練習：編寫一個程序，檢查3個變量x,y,z，輸出其中最大的奇數。如果其中沒有奇數，就輸出一個消息進行說明。筆者是只使用條件語句實行的。（if-else）重難點：先把三個數進行由小到大的排

【python/熱力圖】從csv檔案讀入（x,y,z）畫簡單熱力圖

# -*- coding: utf-8 -*- """ Created on Fri Nov 10 21:20:25 2017 @author: zhoulei """ # Required Packages # 迴歸 import matplotlib.pyplot as

C語言——例項005 輸入三個整數x,y,z，請把這三個數由小到大輸出。

/* Name: Copyright: Author: Date: 27/07/17 08:44 Description: 【程式5】題目：輸入三個整數x,y,z，請把這三

兩個乒乓球隊進行比賽，各出三人。甲隊為a,b,c三人，乙隊為x,y,z三人。已抽籤決定比賽名單

看到一個面試題寫了玩玩 import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import java.util.Map.E

經驗總結——靜態頁面佈局中的常見問題

作為一個web前端的初學者，在靜態頁面的佈局中經常會遇到許多的問題，現在把自己遇到的一些問題及解決方法分享給大家，希望對大家能夠有幫助，錯誤之處還望指正！1、用<div>包含一個<img>標籤時，<img>標籤裡面的圖片下會有一條白色的縫

用小於等於n元去買100只雞，大雞5元/只，小雞3元/只，還有一種1/3元/只得小雞，分別記為下，x,y,z只，程式設計求解x,y,z所有可能解

/***************************************************** copyright (C), 2014-2015, Lighting Studio. Co., Ltd. File name： Author：

第五題：輸入三個整數x,y,z，請把這三個數由小到大輸出,sort()預設按照從小到大輸出

#輸入三個整數x,y,z，請把這三個數由小到大輸出,sort()預設按照從小到大輸出#方法一：input()放在append()裡面，自然每輸入一個就存入一個,append()至少含有一個引數'''list=[]for i in range(3): list.appen

程式設計師必須掌握的效能調優 X Y Z

熱評博文：《如何設計出優美的Web API？》，現閱讀量超 2500，小夥伴們不要錯過哦！ 2003 ~ 2008 年，這五年老兵哥我在通訊行業做實習生和開發崗，主要用 C / C++ / MFC 開發嵌入式 / 伺服器 / 桌面等應用程式，期間做過大量程式碼重構優化，但很少涉及效能調優，要麼我負責的區域性無

【JAVA習題十五】兩個乒乓球隊進行比賽，各出三人。甲隊為a,b,c三人，乙隊為x,y,z三人。已抽籤決定比賽名單。有人向隊員打聽比賽的名單。a說他不和x比，c說他不和x,z比，請程式設計序找出三隊賽手的名單。

package erase; public class 選人比賽 { public static void main(String[] args) { // TODO Auto-generated method stub char A=0,B=0,C=0,str;

輸出的字串中有空格並且無法替換B e a r e r N D c y Z T g 4 N z A t N 2 N h Z C 0 0 Y 2 E 4 L T g x M W E t O D Y

###1.檔案如下： Request url: appv2.qichacha.net/app/v1/extras/getVersion?platform=android&version=11.3.0&timestamp=1543816102814&sign=ddc

translate3d(x,y,z)在頁面佈局中的使用

很快，又到了月底，最近遇到了一個問題，弄了蠻久，做下總結，溫故知新！！！

相關推薦