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如何实现旋转效果(代码示例)

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

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

相关文章

使用simple_3dviz进行三维模型投影

【版权声明】 本文为博主原创文章&#xff0c;未经博主允许严禁转载&#xff0c;我们会定期进行侵权检索。 更多算法总结请关注我的博客&#xff1a;https://blog.csdn.net/suiyingy&#xff0c;或”乐乐感知学堂“公众号。 本文章来自于专栏《Python三维模型处理基础》的系列文…

0基础学习PyFlink——用户自定义函数之UDTAF

大纲 UDTAFTableAggregateFunction的实现累加器定义创建累加 返回类型计算 完整代码 在前面几篇文章中&#xff0c;我们分别介绍了UDF、UDTF和UDAF这三种用户自定义函数。本节我们将介绍最后一种函数&#xff1a;UDTAF——用户自定义表值聚合函数。 UDTAF UDTAF函数即具备了…

ATECLOUD如何进行电源模块各项性能指标的测试?

ATECLOUD平台进行电源模块各项性能指标的测试是通过以下步骤实现的&#xff1a; 连接测试设备&#xff1a;将测试设备与云计算服务器连接&#xff0c;实现数据采集和远程控制。测试设备包括示波器、电子负载、电源、万用表等&#xff0c;这些设备通过纳米BOX连接到云测试平台上…

【Java 进阶篇】深入理解 Java Response:从基础到高级

HTTP响应&#xff08;Response&#xff09;是Web开发中的一个关键概念&#xff0c;它是服务器向客户端&#xff08;通常是浏览器&#xff09;返回数据的方式。理解如何在Java中处理和构建HTTP响应是开发Web应用程序的重要一部分。本文将从基础知识到高级技巧&#xff0c;详细介…

【Linux】虚拟机部署与发布J2EE项目(Linux版本)

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是Java方文山&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的专栏《微信小程序开发实战》。&#x1f3af;&#x1f3a…

Linux 命令|服务器相关

1. 在公共 linux 上创建 python 虚拟环境 【精选】在公共Linux服务器上创建自己的python虚拟环境_服务器创建自己的环境-CSDN博客 2. 查看现存的状态&#xff0c;看有没有程序在跑 nvidia-smi命令详解-CSDN博客 3. 上传本地文件到服务器 在本地 Mac 计算机的终端中&#x…

谷歌财报解读:基本盘守成有余,云业务进取不足?

科技巨头的AI之战持续上演&#xff0c;而财报季是一窥AI成色的重要窗口。 谷歌和微软这对在多个领域均正面对决的科技巨头&#xff0c;又在同一日发布了财报&#xff0c;而这次相比上季度&#xff0c;战局似乎迎来了反转。 上季度&#xff0c;谷歌不仅成功抵御了Bing联手ChatG…

HTML基本概念:

HTML简介&#xff1a; 超文本标记语言&#xff08;英语&#xff1a;HyperText Markup Language&#xff0c;简称&#xff1a;HTML&#xff09;是一种用于创建网页的标准标记语言。 1&#xff09;、HTML 是用来描述网页的一种语言。 2&#xff09;、HTML 不是一种编程语言&am…

STM32:串口轮询模式、中断模式、DMA模式和接收不定长数据

一.串口轮询模式底层机制&#xff1a; 在STM32每个串口的内部都有两个寄存器&#xff1a;发送数据寄存器(TDR)/发送移位寄存器,当我们调用HAL_UART_Transmit 把数据发送出去时&#xff0c;CPU会将数据依次将数据发送到数据寄存器中&#xff0c;移位寄存器中的数据会根据我们设置…

应用于智慧矿山的皮带跑偏视频分析AI算法

一、引言 随着科技的发展&#xff0c;人工智能技术已经在各个领域得到广泛应用。而在智慧矿山领域&#xff0c;皮带跑偏视频分析是其中一个重要的应用方向。本文将详细介绍皮带跑偏视频分析AI算法的原理&#xff0c;以期为智慧矿山的发展提供有益的参考。 二、算法原理 1. 视…

Mac上具好用的屏幕录像工具(Omi录屏专家)Screen Recorder By Omi Mac 下载安装详细教程

Omi 录屏专家 是 Mac 上的一款出色的录音工具&#xff0c;它让您能够在Mac电脑上轻松录制和保存高质量音频。这款应用拥有简单直观的操作界面&#xff0c;无论我们水平如何&#xff0c;都可以轻松捕捉录制卓越的音质和录像视频。 该版本的 Omi 安装后可以直接支持最高 4K 60帧…

Django 尝试SSE报错 AssertionError: Hop-by-hop headers not allowed 的分析

情况描述 近期计划测试一下django对日志打印的支持&#xff0c;一般都是用websocket的方式&#xff0c;想测试一下SSE (Server-sent events)的服务端推送&#xff0c;发现过程中存在报错&#xff1a; Traceback (most recent call last):File "D:\Software\Anaconda3\li…

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

音频是最常用到的功能&#xff0c;音频也是linux和安卓的重点应用场合。STM32MP1带有SAI接口&#xff0c;正点原子的STM32MP1开发板通过此接口外接了一个CS42L51音频DAC芯片&#xff0c;本章就来学习一下如何使能CS42L51驱动&#xff0c;并且CS42L51通过芯片来完成音乐播放与录…

3.5 队列的表示和操作的实现

思维导图&#xff1a; 3.5.1 队列类型 3.5.1 队列的类型定义 1. 简介 队列是一种特殊的线性表&#xff0c;它的特性是只能在表的一端进行插入操作&#xff0c;而在另一端进行删除操作。通常将允许插入操作的一端称为队尾&#xff0c;允许删除操作的一端称为队头。 2. 抽象…

秒级启动的集成测试框架

本文介绍了一种秒级启动的集成测试框架&#xff0c;使用该框架可以方便的修改和完善测试用例&#xff0c;使得测试用例成为测试过程的产物。 背景 传统的单元测试&#xff0c;测试的范围往往非常有限&#xff0c;常常覆盖的是一些工具类、静态方法或者较为底层纯粹的类实现&…

Shadingsphere proxy 启动报错 Windows

Exception in thread "main" java.lang.NoClassDefFoundError 本来打算在本地电脑测试一下proxy的功能&#xff0c;使用的二进制安装包&#xff0c;没想到怎么都启动不起来&#xff0c;一直报找不到某个类的错误。我还以为是自身的配置有问题&#xff0c;等我copy了…

【MySQL索引与优化篇】索引优化与查询优化

索引优化与查询优化 文章目录 索引优化与查询优化1. 概述2. 索引失效案例3. 关联查询优化3.1 Join语句原理3.2 Simple Nested-Loop Join&#xff08;简单嵌套循环连接&#xff09;3.3 Index Nested-Loop Join&#xff08;索引嵌套循环连接&#xff09;3.4 Block Nested-Loop Jo…

Pytorch L1,L2正则化

L1正则化和L2正则化是常用的正则化技术&#xff0c;用于在机器学习模型中控制过拟合。它们的主要区别在于正则化项的形式和对模型参数的影响。 L1正则化&#xff08;Lasso正则化&#xff09;&#xff1a; 正则化项形式&#xff1a;L1正则化使用模型参数的绝对值之和作为正则化…

电源控制系统架构(PCSA)之电源管理软件

下图显示了电源管理软件栈的简化表示。该图说明了OS电源管理框架、具有直接从SCP请求操作功能的组件以及它们与SCP固件之间的关系。 一个重要的方面是&#xff0c;所有硬件电源管理操作都是由SCP代表这些请求者执行的。 这种OS电源管理(OSPM)的简化表示可以分为两部分&#xff…

什么是神经网络,它的原理是啥?(2)

参考&#xff1a;https://www.youtube.com/watch?vmlk0rddP3L4&listPLuhqtP7jdD8CftMk831qdE8BlIteSaNzD 视频3&#xff1a;什么是激活函数&#xff1f;为什么我们需要激活函数&#xff1f;它的类型有哪些&#xff1f; 为什么需要激活函数&#xff1f;如果没有激活函数&…