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

小程序中CSS3: 微信小程序界面设计CSS3在小程序中样式精通课程-第12课-2D转化-translate()从当前元素位置移动
时间：2019/1/11 16:31:23  作者：互联网  来源：网络转载  查看：27952  评论：0
内容摘要：translate() 从当前元素位置移动通用语法通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标）和 top（y 坐标）位置参数：实例值 translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像...
translate() 从当前元素位置移动

通用语法

通过 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>

  效果图


小程序应用

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()从当前元素位置移动微信小程序界面设计入门课程 wxss中css3入门在线视频课程
上一篇：微信小程序界面设计CSS3在小程序中样式精通课程-第13课-2D转化-rotate()给定度数旋转
下一篇：微信小程序界面设计CSS3在小程序中样式精通课程-第11课-渐变Gradients-重复的径向渐变

相关文章

相关评论

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

translate() 从当前元素位置移动

通用语法

小程序应用

Wxml代码

Wxss代码

效果图