CSS3高级应用

是九二呀

已于 2023-05-05 16:51:38 修改

阅读量140

点赞数 1

分类专栏： HTML5+CSS3 HTML+CSS+JavaScript 前端文章标签： css3 css html 前端 html5

于 2023-05-04 00:00:22 首次发布

本文链接：https://blog.csdn.net/Y9232/article/details/130479071

版权

前端同时被 3 个专栏收录

16 篇文章 0 订阅

订阅专栏

HTML+CSS+JavaScript

14 篇文章 0 订阅

订阅专栏

HTML5+CSS3

7 篇文章 0 订阅

订阅专栏

一、2D变形的应用

CSS3变形是一些效果的集合，比如平移、旋转、缩放、倾斜等，每个效果都可以称为变形，它们可以操控元素发生平移、旋转、缩放、倾斜等变化。CSS3形变是通过transform实现的，它可以作用在块元素和行内元素上。

1.2D位移

位移是将元素从一个位置移到另一个位置，可以使用translate（）函数让元素在x轴、y轴上任意移动而不影响x轴或y轴上的其他元素。

<style>
			li {
				list-style: none;
				float: left;
				width: 80px;
				line-height: 40px;
				font-size: 20px;
				margin-left: 5px;
				background: #ccc;
			}
			li a {
				text-decoration: none;
				color: white;
				display: block;
				text-align: center;
				height: 40px;
			}
			li a:hover {
				background: #f00;
				transform: translate(5px, 5px);
			}

</style>
<body>
		<ul>
			<li><a href="#">文件</a></li>
			<li><a href="#">编辑</a></li>
			<li><a href="#">选择</a></li>
			<li><a href="#">查看</a></li>
			<li><a href="#">转到</a></li>
			<li><a href="#">运行</a></li>
			<li><a href="#">终端</a></li>
			<li><a href="#">帮助</a></li>
		</ul>
	</body>

2.2D旋转

rotate（）函数只接受一个值a，代表角度值。a的取值为正值，元素相对原点顺时针旋转，a的取值为负值，元素相对原点逆时针旋转，a的单位使用deg，不会改变元素形状。

<style>
div {
				width: 700px;
				height: 700px;
                margin-top: 200px;
				border: 1px solid #000;
			}
			img:hover {
				transform: rotate(100deg);
			}
</style>
<body>
<div><img src="./1.jpg" alt="" /></div>
</body>

3.2D缩放

scale（）函数用来缩放元素大小，该函数包含两个参数值，分别定义宽度和高度的缩放比例。

li a:hover {
				background: #f00;
				transform: translate(5px, 5px) scale(1.5);
			}

4.2D倾斜

skew()函数能够让元素倾斜显示，会改变元素形状。

li a:hover {
				background: #f00;
				transform: translate(5px, 5px) skew(30deg);
			}

二、3D变形的应用

1.3D变形属性

①transform-origin

用于改变要转换的元素的起始位置，可用于块元素和行内元素，参数可用是具体的px、em值，也可以是百分比，或者是top、bottom、left、right等，默认是以x轴和y轴的初始值为中心点。

<style>
		div {
				margin: 500px auto;
				width: 700px;
				height: 700px;
				border: 1px solid #000;
			}
			img:hover {
				transform: rotate(100deg);
				transform-origin: top;
			}
</style>
<body>
        <div><img src="./1.jpg" alt="" /></div>
</body>

②transform-style

使被转换的子元素保留其3D转换，默认值是flat，表示子元素不保留3D位置。如果想要保留，必须将属性值设为preserve-3d。

如果想要某一个元素进行3D转换，必须在父元素上添加transform-style：preserve-3d。

transform-style: preserve-3d;

③perspective

用于定义3D元素视距视图的距离，单位为px。

perspective: 1500px;

3D常用变形属性：

属性	说明
transform	2D或3D转换
transform-origin	允许改变转换元素的位置
transform-style	嵌套元素在3D空间的显示
perspective	规定3D元素的透视效果

2.3D变形方法

3D变形效果的实现依旧是transform属性，是在2D变形的基础上实现位移、旋转、缩放等效果，与2D变形基本相同，只不过是在平面的基础上多了空间扩展的z轴。

①3D位移

3D位移使用的依旧是2D变形的方法中的translate（），只不过多了z轴，表示在x轴、y轴和z轴是分别移动。

方法	说明
translate3d(x,y,z);	3D转换
translateX()	2D和3D转换，沿着x轴移动元素
translateY()	2D和3D转换，沿着y轴移动元素
translate()	2D和3D转换，沿着z轴移动元素

<style>
			div {
				margin: 500px auto;
				width: 700px;
				height: 700px;
				border: 1px solid #000;
				transform-style: preserve-3d;
				perspective: 500px;/* 3D视距 */
			}
			img:nth-of-type(1) {
				opacity: 0.5;
			}
			img:nth-of-type(2) {
				transform: translate3d(100px, 150px, 50px);
			}
</style>
<body>
		<div>
			<img src="./1.jpg" alt="" />
			<img src="./1.jpg" alt="" />
		</div>
</body>

②3D旋转

同3D位移一样，3D旋转和2D旋转基本类似，只不过多了rotatez（n）和rotate3d（x,y,z,a）两个方法。

rotate3d（）中取值情况如下：

$\rightarrow$ x：元素围绕x轴旋转，设置为1，否则为0。

$\rightarrow$ y：元素围绕y轴旋转，设置为1，否则为0。

$\rightarrow$ z：元素围绕z轴旋转，设置为1，否则为0。

$\rightarrow$ a：是一个角度值，用来指定元素在3D空间旋转的角度，为正值，元素顺时针旋转反之逆时针旋转。

img:nth-of-type(2) {
				transform: rotateX(30deg);
			}

img:nth-of-type(2) {
				transform: rotate3d(1, 0, 0, 30deg);
			}

③3D缩放

3D缩放和2D缩放，增加了scaleZ（n）方法和scale3d（x,y,z）方法。

img:nth-of-type(2) {
				transform: scale3d(1.2, 0.8, 4);
			}

img:nth-of-type(2) {
				transform: scaleX(3);
			}

是九二呀

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS3高级应用

CSS3的2D变形和3D变形的应用。
复制链接

扫一扫

专栏目录