会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 132600个问题

1.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*transform转换
        1)translate转换*/
        .box{
            width: 100%;
            height: 500px;
            border: green solid 5px;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: purple;
            transform: translate3d(50px,50px,50px);
        }
        /*2)rotate转换*/
        .box2{
            width: 100px;
            height: 100px;
            background-color: yellow;
            transform: translateX(200px) rotate(45deg);
        }
         /*3.scale转换*/
         .box3{
             width: 100px;
             height: 100px;
             background-color:rgba(0,0,255,.5);
             transform: scale(1.5) translateX(50px);
             /*transform: translateX(50px) scale(1.5);*/
             /*为什么这里两种变换的顺序调换,div的位置会不一样?*/
         }

    </style>
</head>
<body>
<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>

</body>
</html>

2.效果图

我的问题有两个:

1)为什么一个transform里面,两种属性值顺序调换,div的位置不一样?(例如Box3,把translateX或是scale放前面,div3的X向位置会不一样)

2)为什么这三个div同为行内元素,做了transform变换以后,位置就不在不同的三行里面?

21.png

WEB前端全系列/第一阶段:HTML5+CSS3模块/CSS选择器 24496楼
Python 全系列/第一阶段:Python入门/编程基本概念 24497楼
JAVA 全系列/第一阶段:JAVA 快速入门/面向对象详解和JVM底层内存分析 24498楼
JAVA 全系列/第九阶段:Spring Boot实战/Spring Boot 24499楼
WEB前端全系列/第一阶段:HTML5+CSS3模块/表单 24500楼
WEB前端全系列/第一阶段:HTML5+CSS3模块/表单 24501楼
人工智能/第五阶段:机器学习-线性回归/多元线性回归 24502楼
JAVA 全系列/第十八阶段:亿级高并发电商项目_架构/编码(旧)/电商:基于SpringSecurity实现后台登录功能 24503楼
JAVA 全系列/第十八阶段:亿级高并发电商项目_架构/编码(旧)/电商:基于SpringSecurity实现后台登录功能 24504楼
JAVA 全系列/第六阶段:项目管理与SSM框架/Spring 24505楼
WEB前端全系列/第十六阶段:React企业级项目/宜居(商城类)高级React实战项目(旧) 24507楼
WEB前端全系列/第十六阶段:React企业级项目/宜居(商城类)高级React实战项目(旧) 24508楼
Python 全系列/第一阶段:Python入门/编程基本概念 24509楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2-20212637