day03 前端基礎

2021-10-08 21:40:38 字數 1553 閱讀 5394

transform

:translate

(x,y)

; +x 表示向x軸正方向移動的距離 -x表示向x軸反方向移動的距離

+y 表示向y軸正方向移動(!!!!這裡的y軸正方向指的向下移動) -y表示向y軸反方向(延y軸向上移動!!!!)

示例:transform

:translate

(300px,0px)

;transform

:translate

(0px,-300px)

;transform

:translate

(300px,300px)

;transform

:translate

(-300px,-300px)

;

transform

:rotate

(180deg)

;deg表示度數

正值表示順時針旋轉,負值表示逆時針旋轉

注意:修改變形中心(transform-origin:top\left\right\bottom\center兩兩隨意組合可重複)
示例:

transform-origin

:center center;//表示以水平垂直中心點為變換中心

transform-origin

:left top;//表示以右下為變換中心

transform-origin

:rignt bottom;//表示以右下為變換中心

m表示寬度縮放,m>1時 寬度放大  m<1時寬度縮小

n表示高度縮放, n>1時 高度放大 n<1時高度縮小

也可以這麼寫 transform:scale(1.2)表示寬高等比例放大1.2倍
transform

:scale

(1.2)

;

當x為正值時,延x軸反方向拉伸

當x為負值時。延x軸正方向拉伸

注意:transform:skew(45deg);寫乙個值相當於只在x軸有拉伸在y軸沒有拉伸!!!!!

3d平移

transform:translate3d(x,y,z);

+x 沿著x軸正方向平移

+y 沿著y軸正方向平移

+z 沿著z軸正方向平移

3d旋轉
transform:rotate3d(x,y,z,ndeg);

x:在x軸方向有旋轉 1 表示有 0 沒有

y:在y軸方向有旋轉 1 表示有 0 沒有

z:在z軸方向有旋轉 1 表示有 0 沒有

x軸正方向可以理解為 推乙個人然後這個人倒進電腦螢幕中

y軸正方向可以理解為 開關門

z軸正方向可以理解為 電風扇(即為2d轉換的旋轉rotate)

前端學習day03

今天學了個新東西,是根據螢幕寬度大小修改網頁顯示的內容。大概查了下用法,media 可以針對不同的螢幕尺寸設定不同的樣式,特別是如果你需要設定設計響應式的頁面,media 是非常有用的。當你重置瀏覽器大小的過程中,頁面也會根據瀏覽器的寬度和高度重新渲染頁面。這個有時有效,有時會失效,具體是看電腦解析...

前端學習 Day03

組成部分 標題 表頭 主體 表尾 table 定義乙個 caption 定義 的標題 thead 定義表頭部分 tbody 定義 主體部分 tfoot 定義表尾,一般來顯示彙總資訊 tr 定義一行 th td 定義資料項 單元格 th一般用於表頭,有加粗的樣式 td 一般用於主體部分,沒有加粗的樣式...

前端入門到熟悉day03

01為什麼要清除浮動 浮動會產生 高度塌陷 02偽元素選擇器 link a link 選擇所有未訪問鏈結 visited a visited 選擇所有訪問過的鏈結 active a active 選擇正在活動鏈結 hover a hover 把滑鼠放在鏈結上的狀態 focus input focus...