CSS3 transform: translate

transform: translate

该属于用于设置区块实现平移效果。

<!-- translate(100px, 50px) | 参数一代表水平方向， 参数二代表垂直方向，负数代表反方向 -->
<!-- 平移的效果类似定位，不像 margin 那样会挤兑周边元素 -->
<!-- translateX(100px) 单独的设置水平方向平移 |  translateY(50px) 单独的设置垂直方向平移 -->

<div style="width:100px; height:100px; background:orange; transform: translate(100px, 50px)"></div>

平移效果

☞ 返回 publish: 8/8/2018, 10:16:31 AM / by: jmjc.tech

CSS3 教程 CSS3 入门 CSS3 选择器 CSS3 颜色 CSS3 度量单位 CSS3 文本 CSS3 盒子模型 CSS3 边框 CSS3 背景 CSS3 表格 CSS3 列表 CSS3 变形效果 CSS3 过渡效果 CSS3 动画效果 CSS3 媒体查询 CSS3 浮动布局 CSS3 定位布局 CSS3 多列布局 CSS3 Flex布局 @精简版 - CSS3教程