13-2-CSS3-渐变色、2D转换、3D转换

news2024/12/24 10:44:16

一、渐变色

CSS渐变色（Gradient）是指在元素背景中使用两种或多种不同的颜色进行过渡，超过两个颜色可以形成更为细腻的渐变效果。常见的CSS渐变色有线性渐变和径向渐变。

1. 线性渐变：Linear Gradients 向下/向上/向左/向右/对角方向

/* 从上到下，蓝色渐变到红色 */ 
linear-gradient(blue, red); 

/* 渐变轴为45度，从蓝色渐变到红色 */ 
linear-gradient(45deg, blue, red); 

/* 从右下到左上、从蓝色渐变到红色 */ 
linear-gradient(to left top, blue, red); 

/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */ 
linear-gradient(0deg, blue, green 40%, red);

线性渐变从一个颜色到另一个颜色沿着一条直线渐变，实现代码如下：

background: linear-gradient(direction, color-stop1, color-stop2, ...);

其中，direction参数指定了线性渐变的方向，可以是to top、to bottom、to right、to left、to top left等等值；color-stop表示颜色变化节点，可以设置百分比值或距离值。

以下CSS代码定义了从左上到右下的渐变色背景：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
#grad1 {
  height: 200px;;
background: linear-gradient(to bottom right, red, yellow);
}
</style>
</head>
<body>
<div id="grad1"></div>
</body>
</html>

 

2. 径向渐变：Radial Gradients 由它们的中心定义

径向渐变从圆心开始，向外扩散渐变到整个元素边缘的一种渲染方法，实现代码如下：

background: radial-gradient(shape size at position, start-color, ..., last-color);

其中，shape参数定义了渐变的形状，默认是ellipse（椭圆），可选值还有circle（圆形）；size参数定义了颜色绘制的最远点位置，可选值有closest-side、farthest-side、closest-corner和farthest-corner；at position参数用于定义颜色圆心的坐标位置；start-color是渐变起点开始的颜色，last-colour是渐变结束的颜色，中间还可以设置其他颜色。

以下CSS代码定义了一个由中心向外的径向渐变：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
#grad1 {
    height:300px;
	width:400px;
background: radial-gradient(circle at center, red, yellow);
}
</style>
</head>
<body>
<div id="grad1"></div>
</body>
</html>

值说明
linear-gradient()创建一个线性渐变的 "图像"(从上到下)
radial-gradient()用径向渐变创建 "图像"。 (center to edges)
repeating-linear-gradient()创建重复的线性渐变 "图像"。
repeating-radial-gradient()创建重复的径向渐变 "图像"

二、 2D转换

CSS 2D转换是指在平面内对元素进行旋转、缩放、倾斜、移动等变换，使其呈现出不同的形态和布局。常见的2D转换包括平移（translate）、旋转（rotate）、缩放（scale）和倾斜（skew），其中translate和rotate应用最为广泛，以下逐一介绍：

1. 平移（translate）

平移可以让元素沿X轴或Y轴方向偏移指定的距离，通过设置元素的transform属性完成。

transform: translate(x,y);

其中，x表示水平方向上的偏移量，y表示垂直方向上的偏移量。单位可以是像素（px）、百分比（%）或窗口尺寸单位视口宽度（vw）或视口高度（vh）。

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: translate(50px,100px); /* 标准语法 */
}
</style>
</head>
<body>

<h1>translate() 方法</h1>
<p>translate() 方法从元素当前位置对其进行移动：</p>

<div>
该 div 元素从其当前位置向右移动 50 个像素，并向下移动 100 个像素。
</div>

</body>
</html>

2. 旋转（rotate）

旋转可以让元素绕X轴或Y轴方向旋转指定的角度，通过设置元素的transform属性完成。

transform: rotate(angle);

其中，angle表示旋转角度，可以使用正值表示顺时针方向，负值表示逆时针方向。单位可以是deg（度）或rad（弧度）。

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  transform: rotate(20deg); /* 标准语法 */
}
</style>
</head>
<body>

<h1>rotate() 方法</h1>
<p>rotation() 方法顺时针或逆时针旋转元素。</p>

<div>
这是一个普通的 div 元素。
</div>

<div id="myDiv">
这个 div 元素顺时针旋转 20 度。
</div>

</body>
</html>

 3. 缩放（scale）

缩放可以让元素沿X轴或Y轴方向按比例缩小或放大，通过设置元素的transform属性完成。

transform: scale(x,y);

其中，x表示横向缩放倍数，y表示纵向缩放倍数，必须设置一个值，默认值为1，将保持原有大小。

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: scale(2,3); /* 标准语法 */
}
</style>
</head>
<body>

<h1>scale() 方法</h1>
<p>scale() 方法增加或缩减元素的尺寸。</p>

<div>
该 div 元素是其原始宽度的两倍，是其原始高度的三倍。
</div>

</body>
</html>

4. 倾斜（skew）

倾斜可以让元素沿X轴或Y轴方向倾斜指定的角度，通过设置元素的transform属性完成。

transform: skew(x-angle, y-angle);

其中，x-angle表示在Y轴上围绕X轴倾斜的角度，y-angle表示在X轴上围绕Y轴倾斜的角度。

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  transform: skew(20deg,10deg); /* 标准语法 */
}
</style>
</head>
<body>

<h1>skew() 方法</h1>
<p>skew() 方法将元素倾斜到给定角度。</p>

<div>
这是一个普通的 div 元素。
</div>

<div id="myDiv">
该 div 元素沿 X 轴倾斜 20 度，沿 Y 轴倾斜 10 度。
</div>

</body>
</html>

函数描述
matrix(n,n,n,n,n,n)定义 2D 转换，使用六个值的矩阵。
translate(x,y)定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)定义 2D 转换，沿着 X 轴移动元素。
translateY(n)定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)定义 2D 缩放转换，改变元素的宽度。
scaleY(n)定义 2D 缩放转换，改变元素的高度。
rotate(angle)定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)定义 2D 倾斜转换，沿着 Y 轴。

 三、3D转换

1、rotateX() 方法：使元素在X轴方向上绕中心点旋转

transform: rotateX(30deg);

   在上述代码中，将元素以30度的角度沿着 X 轴逆时针方向进行旋转。如果值为正，表示顺时针旋转；如果值为负，表示逆时针旋转。

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

#myDiv {
  transform: rotateX(180deg);
}
</style>
</head>
<body>

<h1>rotateX() 方法</h1>
<p>rotationX() 方法将元素围绕其 X 轴旋转给定程度。</p>

<div>
这是一个普通的 div 元素。
</div>

<div id="myDiv">
该 div 元素旋转了180度。
</div>
</body>
</html>

 2. rotateY(): 使元素在Y轴方向上绕中心点旋转

transform: rotateY(45deg);

       在上述代码中，将元素以45度的角度沿着 Y 轴逆时针方向进行旋转。如果值为正，表示顺时针旋转；如果值为负，表示逆时针旋转。

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

#myDiv {
  transform: rotateY(150deg);
}
</style>
</head>
<body>

<h1>rotateY() 方法</h1>
<p>rotateY() 方法将元素围绕其 Y 轴旋转给定程度。</p>

<div>
这是一个普通的 div 元素。
</div>

<div id="myDiv">
该 div 元素旋转了 150 度。
</div>
</body>
</html>

 3. rotateZ(): 使元素在Z轴方向上绕中心点旋转

 transform: rotateZ(-60deg);

       在上述代码中，将元素以60度的角度沿着 Z 轴顺时针方向进行旋转。如果值为正，表示逆时针旋转；如果值为负，表示顺时针旋转。

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

#myDiv {
  transform: rotateZ(90deg);
}
</style>
</head>
<body>

<h1>rotateZ() 方法</h1>
<p>rotateZ() 方法将元素围绕其 Z 轴旋转给定程度。</p>

<div>
这是一个普通的 div 元素。
</div>

<div id="myDiv">
该 div 元素旋转了 90 度。
</div>
</body>
</html>

       这些函数的参数都是一个角度值，不同的值会使元素在三维空间内的不同方向上进行旋转。因此，在实际应用中可以根据需要进行灵活调整，创造出丰富多彩的3D效果。同时也要注意，过多和复杂的旋转转换会降低页面性能，需要适度控制。

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

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

相关文章

CyberLink的屏幕录制软件Screen Recorder Deluxe 4.3版本在win10系统的下载与安装配置教程

CyberLink的屏幕录制软件Screen Recorder Deluxe 4.3版本在win10系统的下载与安装配置教程

目录 前言一、Screen Recorder Deluxe安装二、使用配置总结 前言 Screen Recorder Deluxe是由CyberLink公司开发的一款高效的屏幕录制工具&#xff0c;该软件提供了全面而易于使用的功能&#xff0c;可以满足广泛的屏幕录制需求。 Screen Recorder Deluxe的一些主要特点&…
阅读更多...
代码随想录算法训练营 Day 46 | 139.单词拆分,关于多重背包，你该了解这些！,背包问题总结篇！

代码随想录算法训练营 Day 46 | 139.单词拆分,关于多重背包，你该了解这些！,背包问题总结篇！

139.单词拆分 讲解链接&#xff1a;代码随想录-139.单词拆分 确定 dp 数组以及下标的含义&#xff1a;dp[i] : 字符串长度为 i 的话&#xff0c;dp[i]为 true&#xff0c;表示可以拆分为一个或多个在字典中出现的单词。 确定递推公式&#xff1a;如果确定 dp[j] 是 true&…
阅读更多...
PyTorch-Dataset

PyTorch-Dataset

Dataset类&#xff1a; 如何获取数据及标签。 Dataloader类&#xff1a;为之后的网络提供不同的数据形式。 1. 数据文件夹表示&#xff1a; from torch.utils.data import Dataset from PIL import Image import osclass MyData(Dataset):def __init__(self, root_dir, label_d…
阅读更多...
三十七、雪崩问题、Sentinel、簇点链路、流控模式

三十七、雪崩问题、Sentinel、簇点链路、流控模式

1、初识Sentinel 1.1雪崩问题 微服务调用链路中的某个服务故障&#xff0c;引起整个链路中的所有微服务都不可用&#xff0c;这就是雪崩。 解决雪崩问题的常见方式有四种&#xff1a; 超时处理&#xff1a;设定超时时间&#xff0c;请求超过一定时间没有响应就返回错误信息&am…
阅读更多...
Rust每日一练(Leetday0006) 三数之和、字母组合、四数之和

Rust每日一练(Leetday0006) 三数之和、字母组合、四数之和

目录 16. 最接近的三数之和 3Sum Closest &#x1f31f;&#x1f31f; 17. 电话号码的字母组合 Letter-combinations-of-a-phone-number &#x1f31f;&#x1f31f; 18. 四数之和 4Sum &#x1f31f;&#x1f31f; &#x1f31f; 每日一练刷题专栏 &#x1f31f; Rust…
阅读更多...
肝一肝设计模式【九】-- 享元模式

肝一肝设计模式【九】-- 享元模式

系列文章目录 肝一肝设计模式【一】-- 单例模式 传送门 肝一肝设计模式【二】-- 工厂模式 传送门 肝一肝设计模式【三】-- 原型模式 传送门 肝一肝设计模式【四】-- 建造者模式 传送门 肝一肝设计模式【五】-- 适配器模式 传送门 肝一肝设计模式【六】-- 装饰器模式 传送门 肝…
阅读更多...
java枚举类解读

java枚举类解读

目录 为什么需要枚举类 枚举类的使用 枚举类的实现 枚举类的属性 自定义枚举类 使用enum定义枚举类 常见enum的使用场景 switch 向枚举中添加新方法 覆盖枚举的方法 Enum类的主要方法 实现接口的枚举类 为什么需要枚举类 类的对象只有有限个&#xff0c;确定的。…
阅读更多...
如何将map与对象进行转换

如何将map与对象进行转换

Spring Boot内置了一个强大的JSON转换器Jackson&#xff0c;可以实现将JSON字符串或Map类型的数据转换成Java对象。以下是将Map类型的数据转换成Java对象的示例代码&#xff1a; import com.fasterxml.jackson.databind.ObjectMapper;//定义Java对象 public class User {priva…
阅读更多...
oracle客户端的安装教程

oracle客户端的安装教程

文章目录 一、安装前的准备工作 1.1、百度网盘安装包的连接 1.2、百度网盘oracle11g软件包 二、oracle数据库客户端的安装与数据的准备 安装步骤 前言 本文主要讲解oracle客户端的安装与简单使用过程 一、安装前的准备工作 1.1、百度网盘安装包的连接 客户端的软件包 …
阅读更多...
STM32 FMC篇-SDRAM（IS42S16400J）

STM32 FMC篇-SDRAM（IS42S16400J）

IS42S16400J 这个东西太常见啦&#xff0c;长方形的。不会过多解释&#xff0c;详细请阅读它的数据手册。 IS42S16400J是一种高速同步动态随机存储器(SDRAM)&#xff0c;64Mb的存储容量&#xff0c;采用4个bank&#xff0c;每个bank大小为16Mb&#xff0c;总线宽度为16位&…
阅读更多...
【CW32开发】00 开发环境搭建和示例代码运行

【CW32开发】00 开发环境搭建和示例代码运行

1.下载MDK 2.下载芯片相关的固件库 我用的是芯片是CW32F030系列&#xff0c;所以下载相应的固件库 下载地址&#xff1a;https://www.whxy.com/support/filelist/13 3.安装固件库 解压下载的文件&#xff0c;并在cw32f030-stdperiph-lib\IdeSupport\MDK路径下安装固件库 …
阅读更多...
064：cesium设置点划线材质（material-8）

064：cesium设置点划线材质（material-8）

第064个 点击查看专栏目录 本示例的目的是介绍如何在vue+cesium中设置点划线材质，请参考源代码，了解PolylineDashMaterialProperty的应用。 直接复制下面的 vue+cesium源代码，操作2分钟即可运行实现效果. 文章目录 示例效果配置方式示例源代码（共89行）相关API参考：专栏…
阅读更多...
CBFS Vault 2022 for .NET Crack

CBFS Vault 2022 for .NET Crack

将多个文件打包到一个 Vault - 一个“文件中的文件系统”&#xff0c;完成每个文件的压缩、透明加密和随机读/写访问。 亮点包括新的日记选项、用于更好地控制和跟踪的新事件&#xff0c;以及一系列核心性能和可用性改进 [了解更多]。 CBFS保险库 在任何地方存储一个完整的文件…
阅读更多...
chatgpt赋能Python-pythone怎么下载

chatgpt赋能Python-pythone怎么下载

Python下载&#xff1a;在SEO中的作用 介绍 Python是一种广泛应用于编程、自动化任务和数据处理的强大语言。在SEO中&#xff0c;Python也扮演了越来越重要的角色。Python有许多库和工具可供下载&#xff0c;这使得它成为了SEO领域中必不可少的一部分。在本文中&#xff0c;我…
阅读更多...
人工智能之读懂CNN卷积神经网络

人工智能之读懂CNN卷积神经网络

通过往期文章的分享，我们了解了神经网络的结构，一般分为输入层，隐藏层，输出层 TensorFlow神经网络 那什么是卷积神经网络那，这就要我们追溯一下人类识别图像的原理 人类的视觉原理如下：从原始信号摄入开始（瞳孔摄入像素 Pixels），接着做初步处理（大脑皮层某些细胞发现…
阅读更多...
chatgpt赋能Python-pythondna匹配

chatgpt赋能Python-pythondna匹配

Python DNA匹配&#xff1a;从概念到应用 概述 DNA匹配是生物学中的一个重要领域&#xff0c;它意味着找到两个DNA序列之间的相似性并确定它们之间的关系。Python是一种被广泛用于生物信息学中的编程语言&#xff0c;它提供了一系列强大的库和工具来处理DNA序列数据&#xff…
阅读更多...
【C++从0到王者】第七站：内存管理（520没有对象?那就new一个）

【C++从0到王者】第七站：内存管理（520没有对象?那就new一个）

文章目录 一、C/C内存分区二、C语言中动态内存管理方式三、C内存管理方式1.new/delete操作内置类型2.C为什么要搞new和delete3.C中new和delete操作自定义类型4.非要乱用delete和free会造成什么后果&#xff1f; 四、 operator new与operator delete函数五、operator new和opera…
阅读更多...
在安卓中压缩GIF的几种方法(附实例代码)

在安卓中压缩GIF的几种方法(附实例代码)

前言 最近在划水摸鱼的时候&#xff0c;看到有位大佬发了一篇 GIF 压缩思路的文章。 让我突然想起来&#xff0c;很久以前我在我的项目 隐云图解制作 中就实现了一个动图工具箱&#xff0c;其中一个功能就是压缩GIF。 不过这位大佬只介绍了其中几种使用方法&#xff0c;还有…
阅读更多...
Java动态类型语言支持

Java动态类型语言支持

JDK7发布字节码首位新成员——invokedynamic指令。以实现动态类型语言支持。也是为JDK8里可以顺利实现Lambda表达式而做的技术储备。我们将在本文详细了解动态语言支持这项特性出现的背景和它的意义与价值。 1 动态类型语言 动态类型语言的关键特征是它的类型检查的主体过程是…
阅读更多...
MJ discord 添加应用配置

MJ discord 添加应用配置

discord 添加机器人 https://discord.com/developers/applications 刷新token后显示&#xff0c;即机器人Token&#xff0c;后续配置到 mj.discord.bot-token 如图勾选后&#xff0c;打开url进行授权 选择Midjourney Bot所在的服务器 勾上这两个选项&#xff0c;点击 Save Cha…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023