transform: rotate 旋转中心在左上角

news2024/11/12 17:24:46

问题

发现旋转中心在左上角,通过transform-origin修改无效。下面的代码默认一直围绕左上角黑色方块旋转
在这里插入图片描述

解决

控制旋转的位置出错了,本来应该是围绕content的中心进行旋转,但是content没有长宽,所以content默认在左上角,围绕中心旋转也就是在左上角。只需要给content的长宽一个合理的值就可以了,这里把注释代码打开即可

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .content {
        position: absolute;
        top: 300px;
        left: 500px;
        /* width: 300px;
        height: 200px;
        background-color: pink; */
        transform: rotate(45deg);
      }
      .box {
        position: absolute;
        height: 5px;
        width: 6px;
      }
      .box1 {
        left: 0px;
        top: 0px;
        border: 1px solid #000;
      }
      .box2 {
        left: 300px;
        top: 200px;
        border: 1px solid red;
      }
      .box3 {
        left: 0px;
        top: 200px;
        border: 1px solid red;
      }
      .box4 {
        left: 300px;
        top: 0px;
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="box box1"></div>
      <div class="box box2"></div>
      <div class="box box3"></div>
      <div class="box box4"></div>
    </div>

    
  </body>
</html>

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

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

相关文章

华为OD机试 - 寻找最优的路测线路 - Dijkstra算法(Java 2024 E卷 200分)

华为OD机试 2024E卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&#xff08;E卷D卷A卷B卷C卷&#xff09;》。 刷的越多&#xff0c;抽中的概率越大&#xff0c;私信哪吒&#xff0c;备注华为OD&#xff0c;加…

【GNSS】PPPH软件源码解析

注&#xff1a; 1&#xff09;本人在学习PPP过程中&#xff0c;对PPPH软件内所有源码进行了注释&#xff0c;相关理论进行了解析&#xff0c;并通过本文记录&#xff0c;由于是学习记录有些地方注释在了源码上&#xff0c;所以部分理论可能不够详细&#xff0c;请见谅。 2&…

Facebook的虚拟现实计划:未来社交的全新视角

随着科技的不断进步&#xff0c;虚拟现实&#xff08;VR&#xff09;正逐步成为我们日常生活的一部分。作为全球领先的社交平台&#xff0c;Facebook正在大力投入虚拟现实技术&#xff0c;以重新定义社交互动的方式。本文将深入探讨Facebook的虚拟现实计划&#xff0c;分析其如…

在IDEA中如何创建web项目?——不使用Archetype

二、不使用Archetype 1、创建Maven项目 &#xff08;1&#xff09;首先打开Project Structure&#xff1a;File——>Project Structure或者快捷键crtlaltshifts &#xff08;2&#xff09;Module——>New Module&#xff1a; &#xff08;3&#xff09;在新打开的页面下…

三数之和--力扣15

这里写目录标题 题目思路代码 题目 思路 题目要求三元组不能重复&#xff0c;如果使用哈希表来做&#xff0c;去重很复杂&#xff0c;而且需要额外的空间&#xff0c;我们这里使用双指针法直接针对数组操作。注意题目要求返回的是二维数组&#xff01; 最重要的是&#xff0c;…

完整指南:CNStream流处理多路并发框架适配到NVIDIA Jetson Orin (四) 运行、调试、各种问题解决

目录 1 调试jetson-mpeg视频解码模块 1.1 修改config.json 1.2 Picture size 0x0 is invalid 1.3 Process(): Send package failed. Maximum number of attempts reached 1.4 Picture size 2239821608x65535 is invalid 1.5 保存h264文件解码之后的测试图片 1.6 保存RTS…

跨境电商热卖季:选品攻略与实战指南

下半年是跨境电商的旺季 促销节点接踵而至。从感恩节、万圣节、到黑色星期五、网络星期一&#xff0c;再到圣诞节、新年促销等&#xff0c;这些节日不仅激发了消费者的购买欲望&#xff0c;也为跨境电商卖家提供了巨大的市场机遇。那么在这些有望实现销量飞跃的黄金时期&#x…

【SLAM】稀疏矩阵的乘法优化小结

1. 思路小结 要优化你提供的稀疏矩阵乘法代码&#xff0c;我们可以引入CSR&#xff08;压缩稀疏行&#xff09;格式来避免遍历零元素&#xff0c;从而提高效率。CSR格式通过仅存储非零元素以及它们的行和列索引&#xff0c;可以有效减少稀疏矩阵计算时的时间复杂度。下面是对代…

讲解GPU 训练大模型步骤

GPU在训练大模型的工作过程中&#xff0c;扮演着至关重要的角色&#xff0c;其强大的并行计算能力能够显著提升训练速度和效率。以下是GPU训练大模型的详细步骤&#xff1a; 选择合适的GPU和云平台 1. 考虑计算能力 计算能力需求&#xff1a;大模型训练通常需要强大的计算能…

Qt实现登录界面

本文基于Qt实现一个简单的登录界面&#xff0c;主要使用到Widget、button、edit等控件&#xff0c;基于自定义的信号槽实现界面的跳转&#xff0c;使用绘图设备添加背景图等。 1. 创建主界面 设计主界面的样式&#xff0c;并添加相关的控件。如下显示&#xff1a; 代码如下&…

搜索功能技术方案

1. 背景与需求分析 门户平台需要实现对服务信息的高效查询&#xff0c;包括通过关键字搜索服务以及基于地理位置进行服务搜索。面对未来可能的数据增长和性能需求&#xff0c;选择使用 Elasticsearch 来替代 MySQL 的全文检索功能。这一选择的背景与需求可以总结为以下几点&am…

对标世界一流!望繁信科技受邀参加2023企业财务数智化转型论坛

2023年7月21日&#xff0c;由中国CFO发展中心联合浙江省总会计师协会、南京审计大学会计学院、安徽财经大学会计学院举办的“2023企业财务数智化转型论坛&#xff08;长三角站&#xff09;”在上海隆重举办。论坛现场座无虚席&#xff0c;全天候、多维度的话题探讨为广大CFO呈现…

[WEBPWN]BaseCTF week1 题解(新手友好教程版)

WEB A Dark Room 这道题的考点是查看网页源代码 网页源代码这里看到的是网页的html css js在用户浏览器上执行的代码 有时候很多铭感信息&#xff0c;或者关键信息。 查看网页源代码的几种方式 1 右键点击查看网页源代码 2 F12 3 Ctrl U 快捷键 HTTP是什么 HTTP&#x…

车路云一体化系统中的数据交互内容

车路云与相关支撑平台的数据交互是构建智能交通系统的重要组成部分&#xff0c;它涉及到车辆、道路基础设施&#xff08;路侧单元RSU&#xff09;与云端平台及其相关支撑平台之间的复杂信息流通与协同工作。以下是对这一过程的详细解析&#xff1a; 一、数据交互的组成部分 车…

DMDRS学习

DMDRS学习 产品介绍 达梦数据复制软件&#xff08;简称DMDRS&#xff09;是一种用于同构数据库、异构数据库以及各种数据管理系统之间的数据复制软件。DMDRS采用模块化的设计&#xff0c;通过灵活配置不同的功能模块&#xff0c;实现多功能的数据复制服务&#xff0c;以满足多…

Java虚拟机 - 实战篇

一、内存调优 1. 什么是内存泄漏 &#xff08;1&#xff09;内存溢出和内存泄漏 2. 监控Java内存的常用工具 &#xff08;1&#xff09;Top命令 &#xff08;2&#xff09;VisualVM &#xff08;3&#xff09;Arthas &#xff08;4&#xff09;Prometheus Grafana &#xff…

人工智能--模型评估指标

背景 1、分类回归模型的评估指标 分类模型的目标是将输入数据分配到一个离散类别中&#xff0c;常见的评估指标如下&#xff1a; 准确率 (Accuracy) 解释&#xff1a;表示模型预测正确的样本占总样本的比例。适用于类分布平衡的情况&#xff0c;但在类别不平衡时表现不佳。…

十张图“拿捏”MySQL中B+树的生成过程

hello&#xff0c;我是大都督周瑜&#xff0c;这篇文章带你用十张图“拿捏”MySQL中B树的生成过程。 更多干货技术文章、面试题&#xff0c;欢迎关注我的公众号&#xff1a;IT周瑜 当MySQL接收到一条以下SQL时&#xff0c;表示要从t1表中查询数据&#xff1a; select * from t…

基于java+springboot+vue实现的林业产品推荐系统(文末源码+Lw)135

基于SpringBootVue的实现的林业产品推荐系统&#xff08;源码数据库万字Lun文流程图ER图结构图演示视频软件包&#xff09; 系统功能&#xff1a; 林业产品推荐系统是在MySQL中建立数据表保存信息&#xff0c;运用SpringBoot框架和Java语言编写。 并按照软件设计开发流程进行…

新书宣传:《量子安全:信息保护新纪元》

《量子安全&#xff1a;信息保护新纪元》 前言本书的看点本书的目录结语 前言 你好&#xff01; 这是我第一次发布类广告的博文&#xff0c;目的也很单纯&#xff0c;希望以作者的身份介绍一下自己出版的图书——《量子安全&#xff1a;信息保护新纪元》。此书于2024年7月出版…