基于html+css的盒子旋转

news/2024/5/21 1:15:53/文章来源:https://blog.csdn.net/niyite/article/details/130025608

准备项目

项目开发工具

Visual Studio Code 1.44.2
版本: 1.44.2
提交: ff915844119ce9485abfe8aa9076ec76b5300ddd
日期: 2020-04-16T16:36:23.138Z
Electron: 7.1.11
Chrome: 78.0.3904.130
Node.js: 12.8.1
V8: 7.8.279.23-electron.0
OS: Windows_NT x64 10.0.19044

项目结构

在这里插入图片描述

index.html代码如下

<!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>旋转</title><style>* {margin: 0;padding: 0;}.box {display: flex;height: 200px;width: 300px;border: 1px solid #000;justify-content: space-between;transform: rotateX(180deg)}.box div {width: 100px;}img {width: 100%;}</style>
</head><body><div class="box"><div><img src="./images/1.jpg" alt=""></div><div><img src="./images/1.jpg" alt=""></div><div><img src="./images/1.jpg" alt=""></div><div><img src="./images/1.jpg" alt=""></div></div>
</body></html>

总结

此代码可以实现盒子旋转180度带动内容也旋转180度,能够让图片的展示更加自由。

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

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java多线程编程—wait/notify机制

文章目录1. 不使用wait/notify机制通信的缺点2. 什么是wait/notify机制3. wait/notify机制原理4. wait/notify方法的基本用法5. 线程状态的切换6. interrupt()遇到方法wait()7. notify/notifyAll方法8. wait(long)介绍9. 生产者/消费者模式10. 管道机制11. 利用wait/notify实现…

Bert的MLM任务loss原理

bert预训练有MLM和NSP两个任务&#xff0c;其中MLM是类似于“完形填空”的方式&#xff0c;对一个句子里的15%的词进行mask&#xff0c;通过双向transformerfeedforwardrediual_addlayer_norm完成对每个词的embedding编码&#xff0c;然后对mask的这个词进行预测&#xff0c;预…

【记录Bug】IDEA提示“Error:java: 错误: 不支持发行版本 17”

项目场景&#xff1a; 开发工具&#xff1a;IDea 后端框架&#xff1a;SpringBoot 问题描述 在rebuild或运行项目时提示“Error:java: 错误: 不支持发行版本 17”。 这个错误表明你的IDEA版本不支持使用Java 17。你需要将项目编译运行环境设置为更低版本的Java&#xff0c;或…

总结MySQL、Redis的优化措施与使用 mysql_upgrade升级数据结构

目录 一.MySQL数据库优化 二.Redis优化 三.MySQL创建测试账号报错 一.MySQL数据库优化 遵循MySQL层优化的五个原则: 减少数据访问&#xff0c;返回更少的数据&#xff0c;减少交互次数减少服务器CPU开销&#xff0c;利用更多资源。理解SQL优化原理并进行SQL优化&#xff0c…

力扣:字符串中的第一个唯一字符(C++实现)

题目部分&#xff1a; 解题思路&#xff1a; 方案一&#xff1a; 首先认真审题的小伙伴们一定会发现就是题目给了提示只包含小写字母&#xff0c;也就是说我们的排查范围是小写的26个字母。为了怕有的友友们一时短路想不起来&#xff0c;我就其按照顺序列出来吧。 即&#x…

[架构之路-157]-《软考-系统分析师》- 9-信息系统规划-2-少量人力进行项目初步调研(系统分析师的首要任务)与可行性研究报告

目录 9 . 3 初步调查 1. 初步调查的目标 9.4可行性研究 9.4.1可行性评价准则 1 . 经济可行性&#xff08;钱的可行性&#xff09; 2 . 技术可行性&#xff08;能力可行性&#xff09; 3 . 法律可行性&#xff08;社会&#xff09; 4 . 用户使用可行性&#xff08;用户&…

洛谷P2822:组合数问题 ←(帕斯卡法则+取模+前缀和)

【题目来源】https://www.luogu.com.cn/problem/P2822【题目描述】 组合数​表示的是从n个物品中选出m个物品的方案数。举个例子&#xff1a;从(1,2,3)三个物品中选择两个物品可以有(1,2)&#xff0c;(1,3)&#xff0c;(2,3) 这三种选择方法。根据组合数的定义&#xff0c;我们…

属性配置的宏(修改宏IntDir)

项目属性页码 拷贝下 常见宏列表 下表描述了可用宏的常用子集&#xff1b;还有很多没有在这里列出。 转到“宏”对话框&#xff0c;查看项目中的所有属性及其当前值。 有关如何创建 MSBuild 属性定义以及如何在 .props、.targets 和 .vcxproj 文件中将其用作宏的详细信息&am…

面向对象编程(进阶)7:面向对象特征三:多态性

一千个读者眼中有一千个哈姆雷特。 目录 7.1 多态的形式和体现 7.1.1 对象的多态性 举例&#xff1a; 7.1.2 多态的理解 7.1.3 举例 1、方法内局部变量的赋值体现多态 2、方法的形参声明体现多态 3、方法返回值类型体现多态 7.2 为什么需要多态性(polymorphism)&#x…

登录认证功能的实现

1.登录校验分析 什么是登录校验&#xff1f; 所谓登录校验&#xff0c;指的是我们在服务器端接收到浏览器发送过来的请求之后&#xff0c;首先我们要对请求进行校验。先要校验一下用户登录了没有&#xff0c;如果用户已经登录了&#xff0c;就直接执行对应的业务操作就可以了…

C语言头文件路径相关问题总结说明

聊聊系统路径位置&#xff0c;绝对路径与相对路径&#xff0c;正斜杠 / 与 反斜杠 \ 使用说明 ...... by 矜辰所致目录前言一、C语言中的头文件引用二、KEIL 中的头文件路径2.1 IncudePaths 指定的路径绝对路径和相对路径正斜杠 / 与 反斜杠 \ 与双斜杠2.2 include < >…

VN5620以太网测试——环境搭建篇

文章目录 前言一、新建以太网工程二、Port Configuration三、Link up四 Trace界面五、添加Ethernet Packet Builder六、添加ARP Packet七、添加Ethernet IG总结前言 CANoe(CAN open environment)VN5620 :是一个紧凑而强大的接口,用于以太网网络的分析、仿真、测试和验证。 …

页面预加载优化实践

概述在客户端开发中&#xff0c;列表类型页面大多都依赖网络请求&#xff0c;需要等网络数据请求下来后再刷新页面。但遇到网络请求慢的场景&#xff0c;就会导致页面加载很慢甚至加载失败。我负责会员的商品列表页面&#xff0c;在业务场景中&#xff0c;页面元素比较复杂&…

初学对象存储OSS---学习笔记

文章目录前言一、OSS是什么&#xff1f;下面以一个小故事介绍OSS的作用&#xff1a;二、怎么使用OSS1.进入 -----> [阿里云官网](https://www.aliyun.com/)2.点击进入OSS控制台3.获取accessKeyId 和 accessKeySecret4.拿到了accessKeyId 和 accessKeySecret &#xff0c;就可…

[Netty] Netty与Os的零拷贝 (五)

1.Netty的零拷贝原理 Netty接收和发送ByteBuffer采用DirectBuffer&#xff0c;使用堆外直接内存进行Socket读写&#xff0c;不需要进行字节缓冲区的二次拷贝。如果使用传统的JVM的堆内存&#xff08;Heap Buffer&#xff09;进行socker读写&#xff0c;那么JVM将会将堆内存拷贝…

javaScript---理解异步

目录 同步与异步 进程和线程 JS单线程 定时器 同步与异步 同步&#xff1a;调用之后得到结果再干别的任务。 异步&#xff1a;调用之后先不管结果&#xff0c;继续干别的任务。 进程和线程 进程&#xff08;process&#xff09;程序运行的实例&#xff0c;同一个程序可以产生多…

RestClient操作文档

RestClient操作文档5.RestClient操作文档5.1.新增文档5.1.1.索引库实体类5.1.2.语法说明5.1.3.完整代码5.2.查询文档5.2.1.语法说明5.2.2.完整代码5.3.删除文档5.4.修改文档5.4.1.语法说明5.4.2.完整代码5.5.批量导入文档5.5.1.语法说明5.5.2.完整代码5.6.小结5.RestClient操作…

多测合一生产软件SISS教程大全

下载&#xff1a; 在这里插入代码片产品介绍&#xff1a; 不动产权籍调查测绘软件RESS是南方数码针对不动产权籍调查测绘工作研发的一款专业的数据处理软件&#xff0c;融合了业内主流测绘软件&#xff08;南方数码地形地籍成图软件CASS和新一代房测之友BMFse&#xff09;的核…

C++ 一些在工作中遇到的小问题的c++解决脚本程序,记录用的

文章目录前言1 从"txt"文件中读取数组2 线性插值生成数组后存入“.txt”文件前言 本博客用于记录在工作中遇到的一些C小脚本。 1 从"txt"文件中读取数组 txt内文本如下图所示&#xff0c;按行记录数据&#xff0c;每组数据包含第一列为Index即索引号&…

【学习提高】JVM垃圾收集器,垃圾回收算法,一个对象从创建到回收的过程。

1、JVM垃圾收集器 不同的垃圾回收器&#xff0c;适用于不同的场景。常用的垃圾回收器&#xff1a;   串行&#xff08;Serial&#xff09;回收器是单线程的一个回收器&#xff0c;简单、易实现、效率高。   并行&#xff08;ParNew&#xff09;回收器是Serial的多线程版&…