CSS3转换之移位translate（CSS3）

深藏阁楼爱情的钟 2023-10-03 13:46 10阅读 0赞

## CSS3转换之移位translate（CSS3） ##

<!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>CSS3转换之移位translate</title>
        <style>
            /*         移动盒子的位置：  定位 盒子的外边距  2D转换移动 */
            div {
        
                width: 200px;
                height: 200px;
                background-color: skyblue;
    
                /*   x就是x轴上移动位置 y就是y轴上移动位置 中间用逗号分隔 */
                /*  transform: translate(x,y); */
                /*    transform: translate(100px, 100px); */
    
                /*    1.我们只移动x轴 */
                /*    transform: translate(100px,0); */
    
    
    
                /*      但x，y需要大写 */
                /*      2.我们只移动x轴  */
                /*      transform:translateX(100px); */
                /*       
                /*  
                /*          3.我们只移动y轴  */
                /*  transform:translateY(100px); */
    
    
            }
    
            /* 2D转换之移位中，其设置的盒子不会影响其他盒子的位置 */
            div:first-child {
        
                transform: translate(30px, 30px);
            }
    
            div:last-child:hover {
        
                transform: translate(0, -5px);
            }
    
            div:last-child {
        
                background-color: green;
            }
        </style>
    </head>
    
    <body>
        <div>
    
        </div>
    
        <div></div>
    </body>
    
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，10人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS3转换之移位translate（CSS3）

CSS3转换之移位translate（CSS3） <!DOCTYPE html> <html lang="en"> <head>

深藏阁楼爱情的钟/ 2023年10月03日 13:46/ 0 赞/ 11 阅读

相关 CSS3新增转换属性transform

transform之translate transform:translate(x,y) transform:translateX() transfor

以你之姓@/ 2022年12月18日 04:53/ 0 赞/ 196 阅读

相关 CSS3新属性----2、3D转换

文章目录 CSS3 转换 2D转换 3D转换 CSS3 转换 CSS3 转换可以对元素进行移动、缩放、转动、

谁借莪１个温暖的怀抱￠/ 2022年12月04日 07:46/ 0 赞/ 174 阅读

相关 CSS3 2D/3D转换

Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。 Chrome 和 Safari 需要前缀 -webkit-。

分手后的思念是犯贱/ 2022年09月21日 05:36/ 0 赞/ 254 阅读

相关 css的3D转换

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

た入场券/ 2022年09月07日 14:46/ 0 赞/ 186 阅读

相关学习CSS3 3D转换，制作一个3D立方体

要想实现3D的效果，其实非常简单，只需指定一个元素为容器并设置transform-style：preserve-3d，那么它的后代元素便会有3D效果。不过有很多需

谁借莪１个温暖的怀抱￠/ 2022年07月15日 00:20/ 0 赞/ 298 阅读

相关学习CSS3 3D转换，制作一个3D立方体

要想实现3D的效果，其实非常简单，只需指定一个元素为容器并设置transform-style：preserve-3d，那么它的后代元素便会有3D效果。不过有很多需

左手的ㄟ右手/ 2022年07月15日 00:20/ 0 赞/ 242 阅读

相关 CSS3之转换、过渡、动画

1、转换 1、转换的简介 1、什么是转换改变元素在页面中的形状，位置，大小，角度的一种效果在页面中允许实现 1、2D转换允许元素

小咪咪/ 2022年07月11日 01:41/ 0 赞/ 496 阅读

相关 CSS3 3D 转换

rotateX() 方法通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。 div { transfo

我就是我/ 2022年03月18日 13:26/ 0 赞/ 229 阅读

相关 CSS3 2D 转换

CSS3 2D 转换 Internet Explorer 9 需要前缀 -ms-。 Firefox 需要前缀 -moz-。 Chrom

比眉伴天荒/ 2022年03月18日 13:26/ 0 赞/ 230 阅读