當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS之transform的translate平移属性【2D】（一）

發布時間：2023/12/16 CSS 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS之transform的translate平移属性【2D】（一）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

transform屬性

# 屬性屬性 transform: translate/translateX translateY perspective translateZ;

translate

中文意思為平移，通過 X 軸，Y 軸來移動元素。

translate(x, y)

x，y 可設置為百分比值，代表著基于自身寬度/高度的百分比，

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.box {width: 300px;height: 300px;background-color: #bfa;}.children { width: 100px;height: 100px;background-color: red;/* 基于自身寬度的百分比 */transform: translate(100%, 100%);}</style></head><body><div class="box"><div class="children"></div></div></body> </html>

效果圖：

translateX(x)

依舊使用上面的代碼，只不過將 transform: translate(100%, 100%); 改為 transform: translateX(100%);

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.box {width: 300px;height: 300px;background-color: #bfa;position: relative;}.children {width: 100px;height: 100px;background-color: red;/* 基于自身寬度的百分比 *//* transform: translate(100%, 100%); */transform: translateX(100%);}</style></head><body><div class="box"><div class="children"></div></div></body> </html>

效果圖：

translateY(y)

繼續沿用上面的代碼

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.box {width: 300px;height: 300px;background-color: #bfa;position: relative;}.children {width: 100px;height: 100px;background-color: red;/* 基于自身寬度的百分比 *//* transform: translate(100%, 100%); */transform: translateY(100%);}</style></head><body><div class="box"><div class="children"></div></div></body> </html>

效果圖：

translateZ(z)

translateZ(z) 必須要與 perspective(...) 一起使用才有效，并且順序必須為 perspective 在前， translateZ 在后。
perspective 中文意思為視角，代表著眼睛距離屏幕的距離。

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.box {width: 300px;height: 300px;background-color: #bfa;position: relative;}.children {width: 100px;height: 100px;background-color: red;/* 基于自身寬度的百分比 *//* transform: translate(100%, 100%); *//* transform: translateX(100%); *//* transform: translateY(100%); */transform: translateX(100%) translateY(100%) perspective(5px) translateZ(3px);}</style></head><body><div class="box"><div class="children"></div></div></body> </html>

效果圖：【視覺上放大，離眼睛越來越近，但實際大小并沒有變】

總結

以上是生活随笔為你收集整理的CSS之transform的translate平移属性【2D】（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：白帽黑客和安全研究员必备——网安基础问答
下一篇： CSS——文字溢出省略成点点点