CSS：transform顺序问题（translate()+rotate()）

news2024/7/6 18:34:19

问题：下面两行代码在执行效果上有区别吗？

 transform:  translate(100px,100px) rotate(45deg);
 transform:  rotate(45deg) translate(100px,100px);

translate(X,Y)，可以使元素在x轴和y轴上平移。（在translate中，x轴右为正，但y轴下为正）

rotate(deg)，可以使元素旋转一定角度

在几何上分析，先平移后旋转，还是先旋转后平移是一样的。但在CSS中却并不是如此。我们先尝试运行一下：

<html>
    <head>
        <title>
            demo
        </title>
        
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            body{
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100vh;
                width: 100vw;
            }
            .container{
                position: relative;
                /* overflow: hidden; */
            }
            .item-1{
                position: absolute;
                width: 100px;
                height: 100px;
                background-color: blue;

                transform:  translate(100px,100px) rotate(45deg);
            }
            .item-2{
                position: absolute;
                width: 100px;
                height: 100px;
                background-color: red;

            }
        </style>
    </head>
   
    <body>
        <div class="container">
            <div class="item-1"></div>
            <div class="item-2"></div>
        </div>
    </body>
</html>

在上面的代码中，我们先平移，后旋转。我们用红块表示原来的位置，发现蓝色块按照我们的想法，先向右下偏移后，进行了旋转。符合我们的预期。

在这里插入图片描述

我们再尝试一下先旋转后平移。

在这里插入图片描述

这时元素旋转是正常的，但位置却跑到了原先位置的正下方。

其实原因很简单，当元素旋转后，其自身的坐标轴也会旋转，这时元素在进行偏移时就不是正右正下，而是沿着旋转后的坐标轴。

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/422087.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

设计模式之观察者模式(C++)

设计模式之观察者模式(C++)

作者&#xff1a;翟天保Steven 版权声明&#xff1a;著作权归作者所有&#xff0c;商业转载请联系作者获得授权&#xff0c;非商业转载请注明出处 一、观察者模式是什么&#xff1f; 观察者模式是一种行为型的软件设计模式&#xff0c;定义对象间的一种一对多的依赖关系&#x…
阅读更多...
51 openEuler搭建PostgreSQL数据库服务器-安装、运行和卸载

51 openEuler搭建PostgreSQL数据库服务器-安装、运行和卸载

文章目录51 openEuler搭建PostgreSQL数据库服务器-安装、运行和卸载51.1 安装51.2 运行51.2.1 初始化数据库51.2.2 启动数据库51.2.3 登录数据库51.2.4 配置数据库账号密码51.2.5 退出数据库51.2.6 停止数据库51.3 卸载51 openEuler搭建PostgreSQL数据库服务器-安装、运行和卸载…
阅读更多...
【Webpack5】核心原理

【Webpack5】核心原理

介绍 本章节我们主要学习&#xff1a; loader 原理自定义常用 loaderplugin 原理自定义常用 plugin Loader 原理 loader 概念 帮助 webpack 将不同类型的文件转换为 webpack 可识别的模块。 loader 执行顺序 分类 pre&#xff1a; 前置 loadernormal&#xff1a; 普通 …
阅读更多...
【golang项目-GeeCache】动手写分布式缓存 day1 - 实现LRU算法

【golang项目-GeeCache】动手写分布式缓存 day1 - 实现LRU算法

介绍 LRU 内存淘汰算法 LRU(Least Recently Used) 最近最少使用 算法 &#xff0c;系统认为如果这个数据最近使用过那么它被再次使用的概率会高&#xff0c;所以系统会先淘汰最久没被使用的数据 基本逻辑 -----------------------------------------------------------------…
阅读更多...
手把手教你学习IEC104协议和编程实现 十一-定值的概念讲解、定值的操作过程以及部分代码的实现

手把手教你学习IEC104协议和编程实现 十一-定值的概念讲解、定值的操作过程以及部分代码的实现

从本章开始，我们开始研究定值部分； 定值是什么？ 了解过终端的可能都知道，定值就是保护定值，就是设定了一组参数，当终端的采样值达到这个参数的时候，终端就会做出一系列的反应。这样的目的，是为了保护电网，让电网正常运行，具体为什么这么做，不做详细的解释，如果有…
阅读更多...
李宏毅2021春季机器学习课程视频笔记13-自注意力机制

李宏毅2021春季机器学习课程视频笔记13-自注意力机制

【(强推)李宏毅2021/2022春机器学习课程】 Slide地址 一、问题引入 1.模型的输入 无论是预测视频观看人数、视频处理、语言识别&#xff0c;这些所有的model中&#xff0c;输入数据都可以视作为一个向量&#xff08;vector&#xff09;&#xff0c;模型的输出为一个数值或者一…
阅读更多...
UDP的报文结构及注意事项

UDP的报文结构及注意事项

UDP的报文结构及注意事项&#x1f50e;UDP的报文结构源端口和目的端口报文长度校验和&#x1f50e;UDP的注意事项端口号报文长度校验和&#x1f50e;结尾&#x1f50e;UDP的报文结构 图片来自网络 源端口和目的端口 如果将 源IP 和 目的IP 看作是两台计算机在网络中的地址 那么…
阅读更多...
完美解决丨#在python中，如果引用的变量未定义，则会报告NameError: name ‘变量名‘ is not defined。

完美解决丨#在python中，如果引用的变量未定义，则会报告NameError: name ‘变量名‘ is not defined。

NameError 在python中&#xff0c;如果引用的变量未定义&#xff0c;则会报告NameError: name 变量名 is not defined。 如下代码抛出了一个异常&#xff1a; !/usr/bin/env python -- coding:utf-8 -- print hello world print hello %s % name 报错信息如下&#xff1a; Trac…
阅读更多...
基于springboot和ajax的简单项目 02 代码部分实现，思路 （上）

基于springboot和ajax的简单项目 02 代码部分实现，思路 （上）

01.由于是对功能的实现&#xff0c;应该是按照功能的需要去写代码&#xff0c;所以&#xff0c;先看前端html文件的代码。 02.项目的开始界面是starter.html文件。 关键的script标签 <script type"text/javascript">$(function(){//页面加载完成之后执行doLo…
阅读更多...
VS中解决方案和项目的区别

VS中解决方案和项目的区别

总目录 文章目录总目录一、概述1、解决方案2、项目3、项目文件4、解决方案文件夹二、图解1、图解解决方案和项目的关系2、图解sln文件3、图解项目文件结语一、概述 1、解决方案 解决方案是一个容器&#xff0c;通常包含多个项目&#xff0c;这些项目通常相互引用。 解决方案中…
阅读更多...
CSDN粉丝首破一千关，有你名字

CSDN粉丝首破一千关，有你名字

2023-4-11&#xff0c;CSDN粉丝首破一千关。 感谢词版本1,哈哈哈哈哈哈哈哈 在编程世界里&#xff0c;人们可以像创造生命一样创造程序&#xff0c;而我对这种创造和创新的热情&#xff0c;从我的csdn博客社区粉丝首次突破一千人的消息中得到了极大的满足和激励。作为一个Pyth…
阅读更多...
Spring中Bean初始化和销毁的多种方式

Spring中Bean初始化和销毁的多种方式

Spring中Bean初始化和销毁的多种方式一、Bean的多种初始化方式1.PostConstruct注解2.实现InitializingBean接口3.声明init-method方法二、Bean的多种销毁方式1.PreDestroy注解2.实现DisposableBean接口3.声明destroy-method方法三、总结Spring中支持在Bean的加载时声明初始化方…
阅读更多...
跑得快的不止是程序丄【掌握自动化测试让你过五关斩六将】

跑得快的不止是程序丄【掌握自动化测试让你过五关斩六将】

拥有自动化测试技能的软件测试人员更具竞争力&#xff0c;这是当下面试过的人都非常认同的一句话。 作为一名软件测试人员&#xff0c;我们都知道“时间就是金钱”&#xff0c;尤其是在快速迭代的敏捷开发模式下&#xff0c;更是如此。在传统的软件测试流程中&#xff0c;手工…
阅读更多...
【MySQL】JDBC编程

【MySQL】JDBC编程

摄影分享 目录 数据库编程的必备条件 Java的数据库编程&#xff1a;JDBC JDBC的使用步骤 1. 创建数据源DataSourece 2.连接数据库 3.构造并执行sql语句 4.遍历结果集合 5.释放资源 数据库编程的必备条件 编程语言&#xff0c;如Java&#xff0c;C、C、Python等数据库&am…
阅读更多...
谁说35岁是程序员的中年危机？那是他还不知道这些新路子

谁说35岁是程序员的中年危机？那是他还不知道这些新路子

文章目录一、年纪大能不能进大厂&#xff1f;二、为什么说35是危机&#xff1f;1.精力衰退2.脑力衰退3.知识/技术迭代三、年龄大的程序员有哪些出路&#xff1f;1.技术管理2.创业3.技术外包4.做老师5.做自媒体6.写书四、结语我自己今年已有44了&#xff0c;从2021年开始就已经不…
阅读更多...
详解自动化测试之 Selenium 与 Junit

详解自动化测试之 Selenium 与 Junit

文章目录1. 什么是自动化2. 自动化测试的分类3. selenium&#xff08;web 自动化测试工具&#xff09;4. 一个简单的自动化例子5. selenium 常用方法5.1 查找页面元素 findElement ()5.2 元素的定位 By 类5.3 xpath 路径语言6. 常见的元素操作6.1 输入文本 sendKeys6.2 点击 cl…
阅读更多...
什么是Android FrameWork，请你介绍一下？

什么是Android FrameWork，请你介绍一下？

Framework是什么 Framework的中文意思是“框架”&#xff0c;在软件开发中通常指开发框架&#xff0c;在一个系统中处于内核层之上&#xff0c;为顶层应用提供接口&#xff0c;被设计用来帮助开发者快速开发顶层应用&#xff0c;而不必关心系统内核运行机制&#xff0c;通常Fr…
阅读更多...
zabbix报警配置

zabbix报警配置

一、前言 这里用的是zabbix6.0LTS版本&#xff0c;这里记录自定义配置报警&#xff0c;因为邮件报警基本已经很少有人使用了&#xff0c;大部分是&#xff0c;短信、飞书、钉钉等等工具&#xff0c;所有需要定制化报警 二、定义脚本存放路径 cd /usr/local/zabbix/etc[rootn…
阅读更多...
MODBUS 转 EtherNet/IP 网关连接希望森兰变频器案例

MODBUS 转 EtherNet/IP 网关连接希望森兰变频器案例

Modbus转Ethernet/Ip网关&#xff0c;用于将多个 MODBUS 从站设备接入 ETHERNET/IP 主站网络&#xff0c;实现 MODBUS 转 ETHERNET/IP 功能。配上 MODBUS 转 EtherNet 网关专用的 EDS 文件,实现 ETHERNET/IP 主 站对 MODBUS 从站设备的控制。 需要设备 .24v电源模块 罗克韦尔PL…
阅读更多...
【城市污水处理过程中典型异常工况智能识别】（基于迁移学习，拓扑结构卷积神经网络的污水异常工况识别）

【城市污水处理过程中典型异常工况智能识别】（基于迁移学习，拓扑结构卷积神经网络的污水异常工况识别）

基于迁移学习拓扑结构卷积神经网络的污水异常工况识别 **摘 要&#xff1a;针对城市污水处理过程的异常工况识别问题&#xff0c;本文提出了基于图像纹理性分析的工况识别方法。首先总结了几种典型的异常工况的特点&#xff0c;并且分析了卷积神经网络特征提取异常工况的几种纹…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023