CSS3 动画相关属性实例大全（七)（perspective-origin、right、text-decoration-color 、text-indent、text-shadow、top 、transform、transform-origin、vertical-align、visibility 、width、word-spacing、z-index属性）

目录

一、perspective-origin属性（设置3D元素的基数位置）

二、right属性（元素的右边缘）

三、text-decoration-color 属性（设置文本修饰线的颜色）

三、text-indent属性（块元素首行文本内容之前的缩进量）

四、text-shadow属性（添加阴影)

五、top 属性（元素的上外边距边界与其包含块上边界之间的偏移）

六、transform属性（转换由盒模型定位的元素）

七、transform-origin属性（更改一个元素变形的原点）

八、vertical-align属性（垂直对齐方式） 

九、visibility 属性（显示或隐藏元素而不更改文档的布局）

十、width属性（设置元素的宽度）

十一、word-spacing 属性（设置标签、单词之间的空格长度）

十二、z-index属性（定位元素显示层级）

一、perspective-origin属性（设置3D元素的基数位置）

perspective-origin 属性，设置一个3D元素的基数位置

语法：perspective-origin: x-axis y-axis;
perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。

该属性允许您改变 3D 元素的底部位置。

定义时的perspective -Origin属性，它是一个元素的子元素，透视图，而不是元素本身。

默认值：    50% 50%
JavaScript 语法：    object.style.perspectiveOrigin="10% 10%"

值    描述
x-axis    定义该视图在 x 轴上的位置。默认值：50%。
             可能的值：left、center、right、length、%
y-axis    定义该视图在 y 轴上的位置。默认值：50%。
               可能的值：top、center、bottom、length、%

<div id="animation70">DIV1
  <div id="div2">DIV2  猫的智商很高，懂得主人的话，只是不想理你。div>
div>

perspective-origin 属性
设置一个3D元素的基数位置

二、right属性（元素的右边缘）

right 属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。

如果 "position" 属性的值为 "static"，那么设置 "right" 属性不会产生任何效果。
对于 static 元素，为 auto；对于长度值，则为相应的绝对长度；对于百分比数值，为指定值；否则为 auto。 对于相对定义元素，left 的计算值始终等于 right。

<div id="animation71">逆境清醒div>

right 属性规定元素的右边缘。

<div id="animation72"><h1>逆境清醒h1>div>

 text-decoration-color

用于设置文本修饰线的颜色，

文本修饰线是通过 text-decoration-line 属性指定的。

修饰线包括下划线、上划线、删除线和波浪线，

波浪线的典型用途是标明内容拼写错误（仅举例）。

被指定的颜色会作用到该属性值有效范围内的所有修饰线上。

三、text-indent属性（块元素首行文本内容之前的缩进量）

text-indent 属性能定义一个块元素首行文本内容之前的缩进量。

text-indent =   [ ]  &&  hanging?   &&  each-line?              

 <div id="animation73">猫的智商很高，懂得主人的话，只是不想理你。猫的智商很高，懂得主人的话，只是不想理你。div>

 <div id="animation74"><h1>逆境清醒h1>div>

text-shadow 为文字添加阴影。

可以为文字与 decoration 添加多个阴影，阴影值之间用逗号隔开。

每个阴影值由元素在 X 和 Y 方向的偏移量、模糊半径和颜色值组成。

五、top 属性（元素的上外边距边界与其包含块上边界之间的偏移）

top样式属性定义了定位元素的上外边距边界与其包含块上边界之间的偏移，非定位元素设置此属性无效。

<div id="animation75">逆境清醒div>

 top样式属性定义了定位元素的上外边距边界与其包含块上边界之间的偏移，非定位元素设置此属性无效。

六、transform属性（转换由盒模型定位的元素）

transform 属性允许你旋转，缩放，倾斜或平移给定元素。
这是通过修改 CSS 视觉格式化模型的坐标空间来实现的。

<div id="animation76">逆境清醒div>

transform 属性允许你旋转，缩放，倾斜或平移给定元素。

这是通过修改 CSS 视觉格式化模型的坐标空间来实现的。

只能转换由盒模型定位的元素。

如果元素具有display: block，

则由盒模型定位元素。

七、transform-origin属性（更改一个元素变形的原点）

transform-origin CSS 属性让你更改一个元素变形的原点。

值    描述
x-axis    定义视图被置于 X 轴的何处。

可能的值：left、center、right、length、%

y-axis    定义视图被置于 Y 轴的何处。

可能的值：top、center、bottom、length、%

z-axis    定义视图被置于 Z 轴的何处。

可能的值：length

<div id="DIV1">DIV1
  <div id="animation77">DIV2div>
div>

 设置旋转元素的基点位置

transform-origin: x-axis y-axis z-axis;

 transform-origin: 0 0 0;
 transform: rotate(60deg);

transform-origin: 60 0 0;
transform: rotate(60deg);

八、vertical-align属性（垂直对齐方式） 

vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。

<div><img id="animation78" src="2023p1.png" width="100" height="100">当你孤单无助地面对强敌时，谁会是那个信得过的战友？逆境清醒送你一只守护兔，她会像你爱她一样爱着你，她并不厉害，但即使失败了，小小的她也会再度勇敢站起来，保护自己的朋友们。div>

vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。 

九、visibility 属性（显示或隐藏元素而不更改文档的布局）

/* 隐藏段落*/ p { visibility: hidden; }    /* 只有 class 设为 showme 的才会显示*/ p.showme { visibility: visible; }  /* 折叠 class 设为 col 的行*/ p.showme { visibility: visible; }

visibility 显示或隐藏元素而不更改文档的布局。 该属性还可以隐藏 中的行或列。 CSS 属性 visibility 显示或隐藏元素而不更改文档的布局。该属性还可以隐藏 中的行或列。 值  描述 visible  默认值。元素是可见的。正常显示。 hidden 元素是不可见的。隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。要注意若将其子元素设为 visibility: visible，则该子元素依然可见。 collapse   当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。 关键字对于不同的元素有不同的效果： 用于 行、列、列组和行组，隐藏表格的行或列，并且不占用任何空间（与将 display: none 用于表格的行/列上的效果相当）。但是，计算其他行和列的大小时，仍会像显示折叠行或列中的单元格一样进行计算。此值允许从表中快速删除行或列，而不强制重新计算整个表的宽度和高度。 折叠的弹性元素和 ruby 元素会被隐藏，它们本来将要占用的空间会被移除。 对于其他元素，折叠处理与隐藏相同。 inherit  规定应该从父元素继承 visibility 属性的值。   十、width属性（设置元素的宽度） width 属性用于设置元素的宽度。 width 默认设置内容区域的宽度，但如果 box-sizing 属性被设置为 border-box，就转而设置边框区域的宽度。 width 属性也指定为： 下面关键字值之一：min-content，max-content，fit-content，auto。 一个长度值 或者百分比值     <div id="animation80">逆境清醒div> ​ 改变 width 属性：从 50 到 250px 值： 使用绝对值定义宽度。 使用外层元素的容纳区块宽度（the containing block's width）的百分比定义宽度。 auto 浏览器将会为指定的元素计算并选择一个宽度。 max-content 实验性 元素内容固有的（intrinsic）合适宽度。 min-content 实验性 元素内容固有的最小宽度。 fit-content 实验性 取以下两种值中的较大值： 固有的最小宽度 固有首选宽度（max-content）和可用宽度（available）两者中的较小值 可表示为：min(max-content, max(min-content, ))   十一、word-spacing 属性（设置标签、单词之间的空格长度） word-spacing 设置标签、单词之间的空格长度 normal 正常的单词间距，由当前字体和/或浏览器定义。 通过指定具体的额外间距来增加字体的单词间距。 通过指定受影响字符的宽度的百分比的方式来增加的间距。     <div id="animation81"> 当你 孤单无助 地 面对 强敌 时，谁 会是 那个 信得过 的 战友 ？ 逆境清醒 送 你 一只 守护兔 ， 她 会 像你爱她 一样 爱着 你，她 并不厉害，但 即使失败 了，小小 的 她 也会 再度 勇敢 站 起来，保护 自己 的 朋友们。 div> 改变 DIV 元素的 word-spacing 属性 从 "normal" 到 "30px" 词与词之间必须先有空格   十二、z-index属性（定位元素显示层级） z-index 属性设定了一个定位元素及其后代元素或 flex 项目的 z-order。 当元素之间重叠的时候，z-index 较大的元素会覆盖较小的元素在上层进行显示。 语法 /* 字符值 */ z-index: auto;  /* 整数值 */ z-index: 0; z-index: 123; z-index: -1;/* 使用负值降低优先级 */ /* 全局值 */ z-index: inherit; z-index: initial; z-index: unset;  z-index 属性可以被设定为关键词 auto 或 。 取值 意义 auto 盒子不会创建一个新的本地堆叠上下文。在当前堆叠上下文中生成的盒子的堆叠层级和父级盒子相同。 （整型数字）是生成的盒子在当前堆叠上下文中的堆叠层级。此盒子也会创建一个堆叠层级为 0 的本地堆叠上下文。这意味着后代（元素）的 z-indexes 不与此元素的外部元素的 z-indexes 进行对比。 <div id="container">   <div id="animation82">目标Boxdiv>   <div style="top:20px;left:20px;z-index:1;">z-index 1div>   <div style="top:40px;left:40px;z-index:2;">z-index 2div>   <div style="top:60px;left:60px;z-index:3;">z-index 3div>              <div style="top:80px;left:80px;z-index:4;">z-index 4div>             div> ​ 逐步改变 目标Box 的 z-index 属性 ：从 1 到 5 z-index 属性设定了一个定位元素及其后代元素或 flex 项目的 z-order。 当元素之间重叠的时候， z-index 较大的元素会覆盖 较小的元素在上层进行显示。  CSS3 动画相关属性实例大全系列目录： 1、CSS3 动画相关属性实例大全（一)（@keyframes ，background属性，border 属性） 2、CSS3 动画相关属性实例大全（二)（bottom 、box-shadow、clip、color 、column-count、column-gap、column-rule、column-rule-color、column-rule-width、column-width 属性） 3、CSS3 动画相关属性实例大全（三)（columns、filter、flex、flex-basis 、flex-grow、flex-shrink属性） 4、CSS3 动画相关属性实例大全（四)（font、height、left、letter-spacing、line-height 属性） 5、CSS3 动画相关属性实例大全（五)（margin 、max-height、max-width、min-height、min-width、opacity 、order 属性） 6、CSS3 动画相关属性实例大全（六)（outline 、outline-color 、outline-offset、outline-width、padding、padding-bottom、padding-left 、padding-right 、padding-top、perspective属性） 7、 CSS3 动画相关属性实例大全（七)（perspective-origin、right、text-decoration-color 、text-indent、text-shadow、top 、transform、transform-origin、vertical-align、visibility 、width、word-spacing、z-index属性）            推荐阅读：CSS @规则(At-rules)详解系列索引目录 ​​​ ​​​ ​​​ 给照片换底色（python+opencv） 猫十二分类 基于大模型的虚拟数字人__虚拟主播实例 ​​​​​ ​​​​​ ​​​​​ 计算机视觉__基本图像操作（显示、读取、保存） 直方图（颜色直方图、灰度直方图） 直方图均衡化（调节图像亮度、对比度） ​​​​​ ​​​​​ ​​​​​ 语音识别实战（python代码）(一）  人工智能基础篇  计算机视觉基础__图像特征 ​​​​​  matplotlib 自带绘图样式效果展示速查（28种，全） ​​​​​ Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（一） ​​​​​ ​​​​​ ​​​​​ 立体多层玫瑰绘图源码__玫瑰花python 绘图源码集锦  Python 3D可视化（一） 让你的作品更出色——词云Word Cloud的制作方法（基于python，WordCloud，stylecloud) ​​​​​ ​​​​​ ​​​​​  python Format()函数的用法___实例详解（一）(全，例多）___各种格式化替换，format对齐打印  用代码写出浪漫__合集（python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心） python爱心源代码集锦（18款） ​​​​​ ​​​​​ ​​​​​  Python中Print()函数的用法___实例详解(全，例多）  Python函数方法实例详解全集(更新中...)  《 Python List 列表全实例详解系列（一）》__系列总目录、列表概念 ​​​​​ ​​​​​ 用代码过中秋，python海龟月饼你要不要尝一口？  python练习题目录 ​​​​​ ​​​​​ ​​​​​ 草莓熊python turtle绘图（风车版）附源代码  ​草莓熊python turtle绘图代码（玫瑰花版）附源代码  ​草莓熊python绘图（春节版，圣诞倒数雪花版）附源代码 ​​​​​ ​​​​​  巴斯光年python turtle绘图__附源代码 皮卡丘python turtle海龟绘图（电力球版）附源代码 ​​​​​ ​​​​​ ​​​​​  Node.js (v19.1.0npm 8.19.3) vue.js安装配置教程（超详细）  色彩颜色对照表（一）(16进制、RGB、CMYK、HSV、中英文名) 2024年6月多家权威机构____编程语言排行榜__薪酬状况 ​​​​​​ ​​​​​ ​​​​​  手机屏幕坏了____怎么把里面的资料导出（18种方法） 【CSDN云IDE】个人使用体验和建议（含超详细操作教程）（python、webGL方向)  查看jdk安装路径，在windows上实现多个java jdk的共存解决办法，安装java19后终端乱码的解决 ​​​​​ vue3 项目搭建教程（基于create-vue，vite，Vite + Vue） ​​​​​ ​​​​​ ​​​​​ 2023年春节祝福第二弹——送你一只守护兔，让它温暖每一个你【html5 css3】画会动的小兔子，炫酷充电，字体特  别具一格，原创唯美浪漫情人节表白专辑，(复制就可用)（html5,css3,svg)表白爱心代码(4套) SVG实例详解系列（一）(svg概述、位图和矢量图区别（图解）、SVG应用实例） ​​​​​ ​​​​​ ​​​​​ 【程序人生】卡塔尔世界杯元素python海龟绘图（附源代码），世界杯主题前端特效5个（附源码） HTML+CSS+svg绘制精美彩色闪灯圣诞树，HTML+CSS+Js实时新年时间倒数倒计时(附源代码)  2023春节祝福系列第一弹（上）（放飞祈福孔明灯，祝福大家身体健康）（附完整源代码及资源免费下载） ​​​​​ ​​​​​ ​​​​​  tomcat11、tomcat10 安装配置（Windows环境）（详细图文）  Tomcat端口配置（详细）  Tomcat 启动闪退问题解决集（八大类详细） 注：本文转载自blog.csdn.net的逆境清醒的文章"https://blog.csdn.net/weixin_69553582/article/details/143066450"。版权归原作者所有，此博客不拥有其著作权，亦不承担相应法律责任。如有侵权，请联系我们删除。 4339 复制链接 复制链接 相关推荐 发表评论 登录后才能发表评论和回复 注册 / 登录 提交评论 评论记录： 未查询到任何数据！ 回复评论： × 关闭 提交评论