前端开发_HTML5_CSS部分-转化(transform)

最新推荐文章于 2024-05-24 16:01:01 发布

魔笛手7

最新推荐文章于 2024-05-24 16:01:01 发布

阅读量2k

点赞数

分类专栏：前端文章标签： css html5 html 转化平移、倾斜、旋转、缩放

本文链接：https://blog.csdn.net/u013185175/article/details/122029430

版权

前端专栏收录该内容

75 篇文章 8 订阅

订阅专栏

转化(transform)

1.引入

我们在之前的学习中学习了两个特效:过渡和动画，下面我们一起来学习一个新的效果转化，转化的效果主要是在二维(2D)和三维(3D)的坐标上就行的一系列的操作，下面我们一起来学习一下。

2.转化(transform)

(1)、转化概述:CSS 转换（transforms）允许您移动、旋转、缩放和倾斜元素。

(2)、分类:转化我们可以分为四类:移动(translate)、旋转(rotate)、缩放(scale)和倾斜(skew)。下面我们分别来学习一下。

(3)、转化(transfrom)相关属性以及语法

transfrom相关属性以及语法

transfrom：变化类型(主要是指四个:translate、scale、rotate、skew)

transform-origin:设置转化的起点
          
           这里的起点可以使用x轴、y轴作为坐标的起始点，如(0%,0%)
           
           也可以使用距离作为起始点，这一个起始点是基于页面的原点(左上角)的距离，如:(10px,10px)

           也可以使用表示方向的关键字，如:left、right、center、top、bottom

3.移动(translate)

(1).平移概述：平移就是我们数学中说的平移，是在坐标轴上移动的，是基于元素中心的几何中心的变化。

(2).平移相关的语法和参数说明:

平移

语法:

transform:translate(x,y); //指定在水平和垂直两个方向上的平移元素。

transform:translateX(长度或百分数); //指定在水平方向上的平移元素

transform:translateY(长度或百分数); //指定在垂直方向上的平移元素

(3).平移代码实现以及效果

<style type="text/css">
			.box{
				width: 150px;
			    height: 100px;
				border: 1px solid red;
				color: #008000;
				margin-top: 20px;
			}
			
			.left{
				background-color: #6da300;
				transform: translate(50px,50px);
			}
			
			.center{
				background-color: #00aa00;
				transform: translateY(50px);
			}
			
			.right{
				background-color: #d00000;
				transform: translateX(50px);
			}
</style>
<body>
		<div class="containner">
			<div class="box origin">
				原始盒子
			</div>
			<div class="box left">
				垂直和水平都平移50px
			</div>
			<div class="box center">
				垂直平移50px
			</div>
			<div class="box right">
				水平平移50px
			</div>
		</div>
</body>

4.缩放(scale)

(1).缩放概述：缩放起始就是更改元素的宽度和高度，原来的图像的原始大小为1.0，将元素变为原来的X倍，将高度变为Y倍，那么如果给定的数值是0~1之间，就表示是缩小；如果给定的数值是大于1的数值，则表示的是放大。这里需要注意的是如果给定是值是负值的话，它会先绕着X轴或Y轴旋转180°，把先移动到所在的对面象限中，然后再进行缩放。

(2).缩放相关的语法和参数说明:

缩放

语法:

transform:scale(x,y); //指定在水平和垂直两个方向上的缩放元素。

transform:scaleX(长度或百分数); //指定在水平方向上的缩放元素

transform:scaleY(长度或百分数); //指定在垂直方向上的缩放元素

(3).缩放代码实现以及效果

<style type="text/css">
			.box{
				width: 150px;
			    height: 100px;
				border: 1px solid red;
				color: #008000;
				margin-top: 50px;
				float: left;
			}
			
			.left{
				background-color: #6da300;
				transform:scale(1.5,1.5);
				margin-left: 50px;
			}
			
			.center{
				background-color: #00aa00;
				transform: scaleY(.5);
				margin-left: 50px;
			}
			
			.right{
				background-color: #d00000;
				transform: scaleX(.8);
				margin-left: 50px;
			}
			.test{
				background-color: #a16b50;
				transform: scaleX(-1.0);
				margin-left: 50px;
			}
</style>
<body>
		<div class="containner">
			<div class="box origin">
				原始盒子
			</div>
			<div class="box left">
				垂直和水平都放大1.5倍
			</div>
			<div class="box center">
				垂直缩小0.5倍
			</div>
			<div class="box right">
				水平缩小0.8倍
			</div>
			<div class="box test">
				负参数
			</div>
		</div>
</body>

5.旋转(rotate)

(1).旋转概述：所谓的旋转按照一定的角度把之前的元素进行一个角度的变化。

(2).旋转相关的语法和参数说明:

旋转

trasiform:rotete(旋转角度);

旋转的角度的单位:

deg：角度，就是我们再数学上认知的角度

grad:梯度，实际就是变化的速率

rad:弧度

trun:转(或圈)

(3).旋转代码实现以及效果

<style type="text/css">
			.box{
				width: 150px;
			    height: 100px;
				border: 1px solid red;
				color: #008000;
				margin-top: 50px;
				float: left;
			}
			
			.left{
				background-color: #6da300;
				transform:rotate(45deg);
				margin-left: 50px;
			}

			.right{
				background-color: #d00000;
				transform:rotate(-30deg);
				margin-left: 50px;
			}
			
</style>

<body>
		<div class="containner">
			<div class="box origin">
				原始盒子
			</div>
			<div class="box left">
				正值，顺时针旋转45°
			</div>
			<div class="box right">
				负值，逆时针选择30°
			</div>
		</div>
	</body>

6.倾斜(skew)

(1).倾斜概述：所谓的倾斜按照一定的角度把之前的元素进行一个拉伸的效果，使元素沿 X 和 Y 轴倾斜给定角度。

(2).倾斜相关的语法和参数说明:

倾斜

语法:

transform:skew(x-angle,y-angle); //指定在水平和垂直两个方向上的倾斜角度。

transform:skewX(x-angle); //指定在水平方向上拉伸倾斜一定角度

transform:skewY(y-angle); //指定在垂直方向上拉伸倾斜一定角度

(3).倾斜代码实现以及效果

<style type="text/css">
			.box {
				width: 150px;
				height: 100px;
				border: 1px solid red;
				color: #ffff7f;
				margin-top: 50px;
				float: left;
			}

			.left {
				background-color: #6da300;
				transform: skew(30deg,30deg);
				margin-left: 10px;
			}
			
			.center {
				background-color: #5500ff;
				transform: skewX(45deg);
				margin-left: 50px;
			}

			.right {
				background-color: #d00000;
				transform: skewY(45deg);
				margin-left: 50px;
			}
		</style>
	</head>
	<body>
		<div class="containner">
			<div class="box origin">
				原始盒子
			</div>
			<div class="box left">
				水平垂直方向上都倾斜30°
			</div>
			<div class="box center">
				水平方向上倾斜45°
			</div>
			<div class="box right">
				垂直方向上倾斜45°
			</div>
		</div>
	</body>

魔笛手7

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端开发_HTML5_CSS部分-转化(transform)

转化(transform)1.引入我们在之前的学习中学习了两个特效:过渡和动画，下面我们一起来学习一个新的效果转化，转化的效果主要是在二维(2D)和三维(3D)的坐标上就行的一系列的操作，下面我们一起来学习一下。2.转化(transform) (1)、转化概述:CSS 转换（transforms）允许您移动、旋转、缩放和倾斜元素。 (2)、分类:转化我们可以分为四类:移动(translate)、旋转(rotate)、缩放(scale)和倾斜(skew)。下面我们分别来学习一下。...
复制链接

扫一扫