css3的变形与动画

最新推荐文章于 2023-02-15 20:10:46 发布

NUT_fireless

最新推荐文章于 2023-02-15 20:10:46 发布

阅读量238

点赞数

分类专栏： css3 文章标签： css3

本文链接：https://blog.csdn.net/NUT_fireless/article/details/106592351

版权

CSS3的变形与动画

transform属性

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。主要有rotate（旋转）、scale（缩放）、skew（扭曲）和translate（移动）几种功能。

1.rotate

通过指定的角度对元素进行旋转，可以通过transform-origin属性的定义来指定旋转的基点，例如rotate(30deg)，其中30是旋转角度，deg是单位，如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。
实例：

<!DOCTYPE html>
<html>
	<head>
		<style> 
			div{
				width:100px;
				height:75px;
				background-color:yellow;
				border:1px solid black;
			}
			div#div2{
				transform:rotate(30deg);
				-ms-transform:rotate(30deg); /* IE 9 */
				-moz-transform:rotate(30deg); /* Firefox */
				-webkit-transform:rotate(30deg); /* Safari and Chrome */
				-o-transform:rotate(30deg); /* Opera */
			}
		</style>
	</head>
	<body>
		<div> div元素</div>
		<div id="div2"> div元素</div>
	</body>
</html>

效果：

在这里插入图片描述

2.scale

scale()具有三种情况：

scale(x,y)使元素在水平方向和垂直方向同时缩放（X轴和Y轴同时缩放）
scaleX(x)元素仅在水平方向缩放（X轴缩放）
scaleY(y)元素仅在垂直方向缩放（Y轴缩放）
它们具有相同的缩放中心点和基数，其中心点就是元素的中心位置，缩放基数为1，如果其值大于1那么元素放大，反之，则元素缩小。
用法：transform: scale(x,y)x,y表示缩放的倍数。
实例：

<!DOCTYPE html>
<html>
   <head>
   	&l

最低0.47元/天解锁文章

NUT_fireless

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css3的变形与动画

CSS3的变形与动画transform属性transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。主要有rotate（旋转）、scale（缩放）、skew（扭曲）和translate（移动）几种功能。1.rotate通过指定的角度对元素进行旋转，可以通过transform-origin属性的定义来指定旋转的基点，例如rotate(30deg)，其中30是旋转角度，deg是单位，如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。
复制链接

扫一扫