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

news2024/11/20 12:30:55

一、渐变色

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/562402.html

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

相关文章

SVN 修改URL路径-使用重新定位(relocate)命令和找不到问题解决

SVN 修改URL路径-使用重新定位(relocate)命令和找不到问题解决

当svn服务器url发生变更,又不想在本地重新进行checkout操作,这时候可以使用svn relocate命令进行url的重新定位; 在windows下以TortoiseSVN为例,在仓库文件夹上右键,TortoiseSVN-(重新定位)relocate, 1、Windows TortoiseSVN客户端: 在工作复本的根目录上右键->TortoiseSV…
阅读更多...
DOUBLETROUBLE: 1

DOUBLETROUBLE: 1

文章目录 DOUBLETROUBLE: 1实战演练一、前期准备1、相关信息 二、信息收集1、nmap探测目标靶机端口2、扫描目标网址目录3、访问网站&#xff0c;发现secret下有个图片4、将图片下载5、查看图片所含内容6、破解密码并查看7、登陆邮箱8、创建反弹shell9、上传反弹shell10、监听11…
阅读更多...
Jeecg-Boot 未授权SQL注入漏洞（CVE-2023-1454）

Jeecg-Boot 未授权SQL注入漏洞（CVE-2023-1454）

本文转载于&#xff1a;https://blog.csdn.net/qq_27536045/article/details/129944987 环境搭建 JDK: 1.8 (小于11) Maven: 3.5 MySql: 5.7 Redis: 3.2 Node Js: 10.0 Npm: 5.6.0 Yarn: 1.21.1 下载源码 后端源码 https://github.com/jeecgboot/jeecg-boot/tree/v…
阅读更多...
MongoDB安装教程—Ubuntu

MongoDB安装教程—Ubuntu

为啥用MongoDB&#xff0c;问就是客户要求。 为啥用Ubuntu&#xff0c;问就是客户只有Ubuntu的机器。 0. 环境 操作系统&#xff1a; Ubuntu 22.04.1 LTS (GNU/Linux 5.19.0-41-generic x86_64) 不同版本系统差异不同&#xff0c;其他版本系统未测试。 1. 安装 1.1 包管理公…
阅读更多...
深入探索SDL游戏开发

深入探索SDL游戏开发

前言 欢迎来到小K的SDL专栏第二小节&#xff0c;本节将为大家带来基本窗口构成、渲染器、基本图形绘制、贴图、事件处理等的详细讲解&#xff0c;看完后希望对你有收获 文章目录 前言一、简单窗口二、渲染器三、基本图形绘制1、点2、线3、矩形4、圆和椭圆 四、贴图五、事件处理…
阅读更多...
XR交互技术趋势：6DoF追踪、手势识别、眼动跟踪……

XR交互技术趋势：6DoF追踪、手势识别、眼动跟踪……

XR交互技术提供了用户与虚拟环境进行交互的方式和手段&#xff0c;而实时云渲染则提供了真三维、可交互、高沉浸的图形渲染和计算能力。结合这两者&#xff0c;用户可以通过XR设备获得更真实、更沉浸的虚拟体验&#xff0c;同时享受到优质的图形效果和流畅的交互响应。本篇文章…
阅读更多...
关于开发中对端口(port)的几点理解

关于开发中对端口(port)的几点理解

一、服务端的端口是固定的&#xff0c;客户端的端口是随机的 客户端端口是随机的&#xff0c;比如访问百度&#xff0c;系统为浏览器分配了个端口1024。过一会重开电脑&#xff0c;访问了新浪&#xff0c;可能还是用1024端口&#xff0c;我不关浏览器&#xff0c;还要再开一个浏…
阅读更多...
CenterFusion数据处理函数__getitem__()解析

CenterFusion数据处理函数__getitem__()解析

CenterFusion数据处理函数__getitem__解析 1. 图像数据处理1.1 通过利用nuScence_COCO实例化对象获取图像以及相关数据的信息1.2 获取图像数据增强的相关参数&#xff1a;中心点c&#xff0c;尺度scale&#xff0c;旋转rotia和翻转flip1.3 根据生成的参数生成仿射矩阵来对图像进…
阅读更多...
spring boot 集成 swagger3

spring boot 集成 swagger3

Swagger 3是一种开源的API描述工具&#xff0c;它可以帮助开发人员设计、构建、文档化和测试API。Swagger 3支持多种编程语言和框架&#xff0c;包括Java、Node.js、Python、Ruby等&#xff0c;并提供了许多集成工具和插件&#xff0c;例如Postman、Apigee等。 Swagger 3使用Op…
阅读更多...
北京君正应用案例：双镜头双画面乔安枪球联动摄像头

北京君正应用案例：双镜头双画面乔安枪球联动摄像头

你是否遇到过这种问题&#xff1f; 既要看店铺又要看柜台 既要看车又要看大门 雷龙发展提供原厂技术支持&#xff0c;并提供君正集成电路完整解决方案&#xff0c;大大降低你的开发难度及开发时间。 单镜头摄像头一台不够广 出现监控盲区&#xff0c;让小偷有可趁之机 只能装两…
阅读更多...
sql语句---left join or right join

sql语句---left join or right join

1068. 产品销售分析 I 销售表 Sales&#xff1a; -------------------- | Column Name | Type | -------------------- | sale_id | int | | product_id | int | | year | int | | quantity | int | | price | int | -------------------- (s…
阅读更多...
JS文字转语音技术实现

JS文字转语音技术实现

前言 最近在做排队叫号系统&#xff0c;涉及到文字转语音播报&#xff0c;因此总结了几种前端文字转语音发声的方法。 一、Web Speech API h5新提供的一个原生语音识别技术的API&#xff0c;可以将文本转成语音并播放。 作为官方的api&#xff0c;实现的效果是比较符合理想的…
阅读更多...
Windows平台下用例图中包含(include)、扩展(extend)和泛化(generalization）介绍

Windows平台下用例图中包含(include)、扩展(extend)和泛化(generalization）介绍

我是荔园微风&#xff0c;作为一名在IT界整整25年的老兵&#xff0c;今天总结一下Windows平台下用例图中包含(include)、扩展(extend)和泛化(generalization&#xff09;介绍。 用例图是解决用户需求的图&#xff0c;画好用例图一定要理清用例之间的关系。用例之间有三种关系&…
阅读更多...
LabVIEWCompactRIO 开发指南33 测试和调试LabVIEW FPGA代码

LabVIEWCompactRIO 开发指南33 测试和调试LabVIEW FPGA代码

LabVIEWCompactRIO 开发指南33 测试和调试LabVIEW FPGA代码 如前所述&#xff0c;应在仿真模式下开发LabVIEWFPGA VI&#xff0c;以快速迭代设计并避免冗长的编译时间。当需要测试和调试VI时&#xff0c;可以保持仿真模式或利用其他几个选项。应该根据功能验证与性能的要求以…
阅读更多...
【LeetCode】 复制带随机指针的链表

【LeetCode】 复制带随机指针的链表

Leetcode 138.复制带随机指针的链表 文章目录 题目描述解题思路运行代码 题目描述 给你一个长度为 n 的链表&#xff0c;每个节点包含一个额外增加的随机指针 random &#xff0c;该指针可以指向链表中的任何节点或空节点。 构造这个链表的 深拷贝。 深拷贝应该正好由 n 个 全…
阅读更多...
C语言中这么骚的退出程序方式你知道几个？

C语言中这么骚的退出程序方式你知道几个？

前言 在本篇文章当中主要给大家介绍C语言当中一些不常用的特性&#xff0c;比如在main函数之前和之后设置我们想要执行的函数&#xff0c;以及各种花式退出程序的方式。 1、main函数是最先执行和最后执行的函数吗&#xff1f; 1&#xff09;C语言构造和析构函数 通常我们在…
阅读更多...
Python数据分析案例27——PCA-K均值-轮廓系数客户聚类

Python数据分析案例27——PCA-K均值-轮廓系数客户聚类

本案例适合应用统计&#xff0c;数据科学&#xff0c;电商专业 K均值对客户进行分类的案例都做烂了......但我认为这个案例还是有一定的价值的&#xff0c;使用了pca&#xff0c;还有轮廓系数寻找最优的聚类个数。 下面来看看 代码准备 导入包 import numpy as np import pa…
阅读更多...
网上学影视后期靠谱吗 影视后期剪辑需要学什么

网上学影视后期靠谱吗 影视后期剪辑需要学什么

影视后期如果有人手把手当面教的话&#xff0c;当然是最好的。但很多人都没有这么好的条件&#xff0c;实际上&#xff0c;网上也有很多教程可以学习利用。不过&#xff0c;小伙伴们可能会有疑问&#xff0c;网上学影视后期靠谱吗&#xff0c;影视后期剪辑需要学什么&#xff1…
阅读更多...
从创意造型到高品质曲面的卓越体验｜CATIA ICEM Design Experience

从创意造型到高品质曲面的卓越体验｜CATIA ICEM Design Experience

目录 IDX为设计师提供了强大直观的建模工具 IDX为曲面工程师提供高品质数字模型处理能力 IDX与其他工具配合形成完整的数字化解决方案 建模是设计工作的重要环节&#xff0c;合适的数字模型能够在各个环节对整个设计流程产生正面的推动作用。 设计的不同阶段对模型有各自的…
阅读更多...
Azkaban从入门到精通以及案例实操系列

Azkaban从入门到精通以及案例实操系列

1、Azkaban概论 1.1、Azkaban简介 Azkaban 是一个开源的基于 Web 的工作流调度系统&#xff0c;由 LinkedIn 公司开发并维护。它可以帮助用户在大规模数据处理中来管理和调度作业&#xff0c;提供了简单易用、高效可靠的工作流设计和调度功能。 Azkaban 的主要特点包括&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023