微信小程序界面设计小程序中CSS3样式精通课程-2D转化-translate() 从当前元素位置移动

最新推荐文章于 2024-08-11 18:21:06 发布

黄菊华老师

最新推荐文章于 2024-08-11 18:21:06 发布

阅读量904

点赞数

分类专栏：视频教程微信小程序-样式-wxss-css 文章标签：微信小程序界面设计小程序中CSS3样式精通课程-2D转化-transl 2D转化-translate() 从当前元素位置移动

本文链接：https://blog.csdn.net/u013818205/article/details/86596211

版权

视频教程同时被 2 个专栏收录

184 篇文章 2 订阅

订阅专栏

微信小程序-样式-wxss-css

101 篇文章 4 订阅

订阅专栏

2D转化-translate() 从当前元素位置移动

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：https://edu.csdn.net/topic/huangjuhua
通用语法
通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标）和 top（y 坐标）位置参数：
实例
值 translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
}
div#div2
{
transform:translate(50px,100px);
-ms-transform:translate(50px,100px); /* IE 9 */
-moz-transform:translate(50px,100px); /* Firefox */
-webkit-transform:translate(50px,100px); /* Safari and Chrome */
-o-transform:translate(50px,100px); /* Opera */
}
</style>
</head>
<body>

<div>你好。这是一个 div 元素。</div>

<div id="div2">你好。这是一个 div 元素。</div>

</body>
</html>

效果图
微信小程序界面设计小程序中CSS3样式精通课程-2D转化-translate() 从当前元素位置移动

小程序应用

> Wxml代码

<view class='c01'>
1
</view>

<view class='c02'>
2
</view>

<view class='c03'>
3
</view>

Wxss代码

.c01{
	width:100px;
	height:50px;
  background-color: gainsboro;
}

.c02{
	width:50px;
	height:50px;
  background-color: antiquewhite;
  transform:translate(50px,100px);
}

.c03{
	width:100px;
	height:50px;
  background-color: gainsboro;
}

效果图
微信小程序界面设计小程序中CSS3样式精通课程-2D转化-translate() 从当前元素位置移动