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

骑猪看日落 2024-02-19 16:18 10阅读 0赞

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

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua][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() 从当前元素位置移动][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() 从当前元素位置移动][CSS3_-2D_-translate_ 1]

[欢迎大家学习我的视频课程：微信小程序界面设计-小程序中CSS3样式精通课程][-_CSS3]

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

[https_edu.csdn.net_topic_huangjuhua]: https://edu.csdn.net/topic/huangjuhua
[CSS3_-2D_-translate_]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/6194ba884ff24aa8ad2558cf02b9d548.png
[CSS3_-2D_-translate_ 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/5a6d1746a59341f08ae7f783ef0f6743.png
[-_CSS3]: https://ke.qq.com/course/371155?tuin=2b10d56
[CSS3_-2D_-translate_ 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/b1290a2b46c8423d97c7b716c685b415.png