CSS之transform的translate平移属性【2D】（一）
生活随笔
收集整理的這篇文章主要介紹了
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)
繼續沿用上面的代碼
<!--* @Author: jhl* @Date: 2021-07-14 20:59:38* @LastEditors: jhl* @LastEditTime: 2021-07-14 21:35:26* @Description: --> <!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 中文意思為 視角，代表著眼睛距離屏幕的距離。
效果圖：【視覺上放大，離眼睛越來越近，但實際大小并沒有變】
總結
以上是生活随笔為你收集整理的CSS之transform的translate平移属性【2D】（一）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 白帽黑客和安全研究员必备——网安基础问答
- 下一篇： Flexsim Rack设置最底层Lev