当前位置: 首页 > news >正文

css:transform实现平移、旋转、缩放、倾斜元素

目录

    • 文档
    • 语法
    • 示例
      • 旋转元素 transform-rotate
      • 旋转过渡
      • 旋转动画
    • 参考文章

文档

  • https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform

语法

/* Keyword values */
transform: none;/* Function values */
transform: matrix(1, 2, 3, 4, 5, 6);
transform: translate(12px, 50%);
transform: translateX(2em);
transform: translateY(3in);
transform: scale(2, 0.5);
transform: scaleX(2);
transform: scaleY(0.5);
transform: rotate(0.5turn);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);
transform: matrix3d(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16);
transform: translate3d(12px, 50%, 3em);
transform: translateZ(2px);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleZ(0.3);
transform: rotate3d(1, 2, 3, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: perspective(17px);/* Multiple function values */
transform: translateX(10px) rotate(10deg) translateY(5px);/* Global values */
transform: inherit;
transform: initial;
transform: unset;

示例

旋转元素 transform-rotate

<style>.box {width: 200px;height: 200px;line-height: 200px;border: 1px solid green;text-align: center;margin: 0 auto;}.box + .box {margin-top: 100px;}.rotate {transform: rotate(45deg);}</style><div class="box">正常元素</div><div class="box rotate">旋转45deg</div>

实现效果
在这里插入图片描述

旋转过渡

.rotate {transition: transform 0.5s ease-in-out;
}.rotate:hover {transform: rotate(45deg);
}

旋转动画

.rotate {animation: rotate-ani 2s linear infinite;
}@keyframes rotate-ani {from {transform: rotate(0deg);}to {transform: rotate(360deg);}
}

参考文章

  1. css如何实现旋转效果(代码示例)

相关文章:

css:transform实现平移、旋转、缩放、倾斜元素

目录 文档语法示例旋转元素 transform-rotate旋转过渡旋转动画 参考文章 文档 https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform 语法 /* Keyword values */ transform: none;/* Function values */ transform: matrix(1, 2, 3, 4, 5, 6); transform: translate…...

如何理解AutoGPT

AutoGPT和GPT-4都是OpenAI公司的产品。AutoGPT是一个实验性开源应用程序&#xff0c;展示了GPT-4语言模型的能力。GPT-4是OpenAI研发的人工智能语言模型。 AutoGPT在GitHub主页上有151k星&#xff08;151k星代表了151,000个用户点赞了该项目&#xff09;&#xff0c;AutoGPT获…...

【网络知识必知必会】聊聊网络层IP协议

文章目录 前言IP 协议格式总结 前言 在之前的博文中, 我们聊过了传输层中的两个重点协议 TCP 和 UDP, 本文我们再来聊聊网络层中的一个协议IP, 简单认识一下 IP 协议格式. IP 协议与 TCP 协议的复杂度也不妨多让, 不过我们在这里只是简单的聊一聊 IP 协议的报文格式就行, 毕竟…...

66. 加一

给定一个由 整数 组成的 非空 数组所表示的非负整数&#xff0c;在该数的基础上加一。 最高位数字存放在数组的首位&#xff0c; 数组中每个元素只存储单个数字。 你可以假设除了整数 0 之外&#xff0c;这个整数不会以零开头。 示例 1&#xff1a; 输入&#xff1a; digits …...

逻辑(css3)_强制不换行

需求 如上图做一个跑马灯数据&#xff0c;时间、地点、姓名、提示文本字数都不是固定的。 逻辑思想 个人想法是给四个文本均设置宽度&#xff0c;不然会出现不能左对齐的现象。 此时四个文本均左对齐&#xff0c; 垂直排列样式也比较好看&#xff0c;但是出现一个缺点&#…...

营收净利双降、股价下跌四成,敷尔佳带伤闯关“双11”

今年双11预售已经开启&#xff0c;敷尔佳在天猫、抖音等电商平台火热营销&#xff1b;营销热业绩冷&#xff0c;敷尔佳的三季报不及预期。 10月23日&#xff0c;哈尔滨敷尔佳科技发展有限公司(下称“敷尔佳”&#xff0c;301371SZ)公布2023年三季报&#xff0c;其三季度营收净…...

C语言KR圣经笔记 2.8自增和自减 2.9位运算 2.10赋值

2.8 自增和自减操作符 C提供了两个不同寻常的操作符&#xff0c;用于对变量进行自增和自减。自增操作符对操作数加上1&#xff0c;而自减操作符 -- 对操作数减去1。我们已经频繁使用 对变量进行自增&#xff0c;如&#xff1a; if (c \n)nl; 不寻常之处在于 和 -- 既能用作…...

PHP的Excel导出与导入

下载地址&#xff08;注意php版本大于7.3可能会报错&#xff09; GitHub - PHPOffice/PHPExcel: ARCHIVED 解压 1、导出 Excel $data[[name>a,age>11],[name>b,age>22],[name>d,age>33], ]; $fileds["name">"名称","age"…...

Ubuntu自建git服务器

Ubuntu 安装 gitlab-ce sudo apt-get update sudo apt-get install gitlab-ce 安装成功 sudo apt-get install gitlab-ce 正在读取软件包列表... 完成 正在分析软件包的依赖关系树 正在读取状态信息... 完成 下列【新】软件包将被安装&#xff1a;gitlab-ce 升…...

【面试专题】并发编程篇①

&#x1f4c3;个人主页&#xff1a;个人主页 &#x1f525;系列专栏&#xff1a;Java面试专题 1.线程和进程的区别 线程和进程都是操作系统中的概念&#xff0c;它们的主要区别如下&#xff1a; 资源分配&#xff1a;进程是操作系统中的资源分配的基本单位&#xff0c;每个进程…...

Linux Centos7安装后,无法查询到IP地址,无ens0,只有lo和ens33的解决方案

文章目录 前言1 查看network-scripts目录2 创建并配置 ifcfg-ens33 文件3 禁用NetworkManager4 重新启动网络服务总结 前言 在VMware中&#xff0c;安装Linux centos7操作系统后&#xff0c;想查询本机的IP地址&#xff0c;执行ifconfig命令 ifconfig结果如下&#xff1a; 结…...

行为型模式-访问者模式

在访问者模式中&#xff0c;我们使用了一个访问者类&#xff0c;它改变了元素类的执行算法。通过这种方式&#xff0c;元素的执行算法可以随着访问者改变而改变。这种类型的设计模式属于行为型模式。根据模式&#xff0c;元素对象已接受访问者对象&#xff0c;这样访问者对象就…...

go-kit中如何开启websocket服务

在Go-Kit中&#xff0c;可以使用github.com/go-kit/kit/transport/http包来开启WebSocket服务。以下是一个简单的示例代码&#xff0c;演示了如何在Go-Kit中开启WebSocket服务&#xff1a; package mainimport ("context""fmt""net/http""…...

私有网络的安全保障,WorkPlus Meet内网视频会议助力企业高效会议

在企业内部沟通与协作中&#xff0c;视频会议成为了一种必不可少的沟通方式。然而&#xff0c;传统的互联网视频会议往往受制于网络不稳定因素&#xff0c;给企业带来不便与困扰。WorkPlus Meet作为一款专注内网视频会议的软件&#xff0c;致力于为企业打造高效、稳定的内网视频…...

国际权威媒体聚焦:孙宇晨和波场TRON在迪拜荣获加密行业重磅奖项

近日,在迪拜举行的区块链生态大会(Blockchain Life Conference)上,波场TRON创始人、火币HTX全球顾问委员会委员孙宇晨斩获“年度加密企业家”称号,波场TRON荣膺“年度最佳 Layer 1”大奖。这一消息迅速得到彭博社、雅虎财经、美联社和法国最大媒体之一Le Figaro等国际权威媒体的…...

新闻详情。

<!DOCTYPE html> <html><head><title>新闻</title><meta http-equiv"content-type" content"text/html; charsetutf-8"/><meta name"apple-mobile-web-app-capable" content"yes"/><lin…...

Java面试题-Redis-第二天(Redis持久化、过期键删除策略、内存淘汰策略)

目录 一、Redis持久化机制 二、Redis过期键删除策略 三、Redis内存淘汰策略 一、Redis持久化机制 为了能重用Redis数据&#xff0c;防止系统故障造成数据丢失&#xff0c;我们就需要将Redis中的数据写入到磁盘中&#xff0c;也就是持久化 1. 有哪些方式 有rdb和aof两种方式…...

ElasticSearch快速入门实战

全文检索 什么是全文检索 全文检索是一种通过对文本内容进行全面索引和搜索的技术。它可以快速地在大量文本数据中查找包含特定关键词或短语的文档&#xff0c;并返回相关的搜索结果。全文检索广泛应用于各种信息管理系统和应用中&#xff0c;如搜索引擎、文档管理系统、电子…...

揭秘MySQL数据同步至Elasticsearch的最佳方案与技巧

本文介绍下当前常见的场景之一&#xff1a;Mysql数据同步Elasticsearch的实现方案&#xff0c;这里以电商为例&#xff0c;其实所有相关搜索内容都可以使用此方案。 对于搜索&#xff0c;应该是所有APP必备的基础功能&#xff0c;不同时期有不同的解决方案&#xff0c;本次重点…...

正点原子嵌入式linux驱动开发——Linux RTC驱动

RTC也就是实时时钟&#xff0c;用于记录当前系统时间&#xff0c;对于Linux系统而言时间是非常重要的&#xff0c;就和使用Windows电脑或手机查看时间一样&#xff0c;在使用Linux设备的时候也需要查看时间。本章就来学习一下如何编写Linux下的RTC驱动程序。 Linux内核RTC驱动…...

AgentScope Java:阿里开源的多智能体框架,让AI应用开发变得简单

为什么我们需要Agent框架&#xff1f; 如果你开发过AI应用&#xff0c;一定遇到过这些问题&#xff1a; LLM只能生成文本&#xff0c;无法查询数据库、调用API、执行计算多轮对话需要管理上下文&#xff0c;但手动维护消息历史太繁琐复杂的任务需要多步推理&#xff0c;简单的…...

芯片创业资金消耗与团队构建全解析

芯片初创公司的资金消耗分析&#xff1a;从架构设计到流片量产1. 芯片创业的资金挑战概述芯片设计行业作为典型的技术密集型产业&#xff0c;其创业过程面临着独特的资金挑战。与互联网创业不同&#xff0c;芯片公司从组建团队到产品量产需要经历漫长的研发周期和巨额的资金投入…...

FunClip终极指南:三步完成本地AI视频剪辑与智能处理高效工作流

FunClip终极指南&#xff1a;三步完成本地AI视频剪辑与智能处理高效工作流 【免费下载链接】FunClip Open-source, accurate and easy-to-use video clipping tool, LLM based AI clipping intergrated || 开源、精准、方便的视频切片工具&#xff0c;集成了大语言模型AI智能剪…...

终极Lens界面定制指南:3个实用技巧提升Kubernetes管理效率

终极Lens界面定制指南&#xff1a;3个实用技巧提升Kubernetes管理效率 【免费下载链接】lens Lens - The way the world runs Kubernetes 项目地址: https://gitcode.com/gh_mirrors/le/lens Lens作为全球最受欢迎的Kubernetes IDE&#xff0c;凭借其直观的上下文感知界…...

Qwen2.5-7B离线推理实战:无需GPU,CPU版本快速部署指南

Qwen2.5-7B离线推理实战&#xff1a;无需GPU&#xff0c;CPU版本快速部署指南 1. 引言 在当今AI技术快速发展的背景下&#xff0c;大型语言模型的应用越来越广泛。然而&#xff0c;许多开发者和企业在实际部署时面临GPU资源不足或成本过高的问题。本文将介绍如何在普通CPU环境…...

2026 AI关键词搜索排名优化行业专业测评:中之网科技江苏有限公司——技术驱动,万词霸屏,全链路AI获客解决方案

2026 AI关键词搜索排名优化行业专业测评&#xff1a;中之网科技江苏有限公司——技术驱动&#xff0c;万词霸屏&#xff0c;全链路AI获客解决方案一、测评背景与核心维度随着AI大模型&#xff08;DeepSeek、豆包、腾讯元宝、Kimi、文心一言、通义千问等&#xff09;成为企业获客…...

PHP 中的文件读写与上传

PHP 中的文件读写与上传 判断与信息获取 判断文件函数说明返回值file_exists($path)判断文件或目录是否存在boolis_file($path)判断是否是文件boolis_dir($path)判断是否是目录boolis_readable($path)判断是否可读boolis_writable($path)判断是否可写bool<?php $file ./co…...

解决IDEA/DataGrip连接SQL Server时的TLS协议兼容性问题

1. 为什么IDEA/DataGrip连不上SQL Server&#xff1f; 最近帮同事排查一个数据库连接问题&#xff0c;发现不少人在用IDEA或DataGrip连接SQL Server时都会遇到这个报错&#xff1a;"The server selected protocol version TLS10 is not accepted by client"。这个错误…...

BabelDOC终极指南:如何完美翻译PDF学术论文并保持原格式

BabelDOC终极指南&#xff1a;如何完美翻译PDF学术论文并保持原格式 【免费下载链接】BabelDOC Yet Another Document Translator 项目地址: https://gitcode.com/GitHub_Trending/ba/BabelDOC 还在为PDF翻译后格式混乱而烦恼吗&#xff1f;BabelDOC为您提供了一站式解决…...

OBS Multi RTMP插件:终极多平台直播同步推流解决方案

OBS Multi RTMP插件&#xff1a;终极多平台直播同步推流解决方案 【免费下载链接】obs-multi-rtmp OBS複数サイト同時配信プラグイン 项目地址: https://gitcode.com/gh_mirrors/ob/obs-multi-rtmp 在当今直播行业快速发展的时代&#xff0c;如何同时在多个平台进行高效…...