CSS基础(part22)--2D转换
生活随笔
收集整理的這篇文章主要介紹了
CSS基础(part22)--2D转换
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
學習筆記，僅供參考，有錯必究
參考自：pink老師教案
文章目錄
- 2D轉換
- translate
- rotate
- scale
2D轉換
2D 轉換是改變標簽在二維平面上的位置和形狀：
- 移動： translate
- 旋轉： rotate
- 縮放： scale
translate
translate 語法：
transform: translate(x, y) transform: translateX(n) transfrom: translateY(n)x 就是 x 軸上水平移動，y 就是 y 軸上水平移動。
知識點：
- 2D 的移動主要是指水平、垂直方向上的移動
- translate 最大的優點就是不影響其他元素的位置
- translate 中的100%單位，是相對于本身的寬度和高度來進行計算的
- 它對于行內標簽沒有效果
- 舉個例子
HTML代碼：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>2D位移</title><style>div {width: 200px;height: 200px;}.demo1 {background-color: pink;transform: translate(50px, 50px);}.demo2 {background-color: red;}</style> </head><body><div class="demo1">1</div><div class="demo2">2</div> </body></html>頁面：
rotate
2D 旋轉指的是讓元素在二維平面內順時針或者逆時針旋轉.
rotate 語法：
/* 單位是：deg */ transform: rotate()設置元素旋轉的中心點：
transform-origin: x y;知識點：
- rotate 的單位是 deg
- 角度為正時，順時針，角度為負時，逆時針
- 默認旋轉的中心點是元素的中心點
- 舉個例子
HTML代碼：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>2D旋轉</title><style>img {width: 150px;border-radius: 50%;border: 5px solid blue;/* 過渡寫到本身上 */transition: all 0.3s;}img:hover {transform: rotate(360deg);}</style> </head><body><img src="media/TX.jpg" alt=""> </body></html>頁面：
注意，當把鼠標放在這個dog圖片上時，圖片會圍繞中心旋轉360度。
scale
scale可以控制元素的放大與縮小.
語法：
transform: scale(x, y)知識點：
- x 與 y 之間要使用逗號進行分隔
- transform: scale(1, 1): 寬高都放大一倍，相當于沒有放大
- transform: scale(2, 2): 寬和高都放大了二倍
- transform: scale(2): 如果只寫了一個參數，第二個參數就和第一個參數一致
- transform:scale(0.5, 0.5): 縮小
- scale 最大的優勢為，可以設置轉換中心點縮放，默認以中心點縮放，而且不影響其他盒子
- 舉個例子
HTML代碼：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>2D縮放</title><style>p {background-color: pink;}div {width: 100px;height: 100px;background-color: blue;margin: 100px auto 10px auto;transform-origin: right top;}div:hover {/* 1. 里面寫的數字不跟單位,就是倍數的意思 1就是1倍,2就是 2倍 *//* transform: scale(2, 2); *//* 2. 修改了寬度為原來的2倍 ,高度不變 *//* transform: scale(2, 1); *//* 3. 等比例縮放 同時修改寬度和高度*/transform: scale(2);}</style></head><body><div></div><p>安徽財經大學</p> </body></html>頁面：
將鼠標移動到藍色方塊上：
可以看到，方塊以右上角為中心點放大了。
總結
以上是生活随笔為你收集整理的CSS基础(part22)--2D转换的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 不属于企业所得税纳税人的是
- 下一篇： CSS 单行溢出文本显示省略号...的方