transform的使用以及实战案例

最新推荐文章于 2025-06-19 17:39:03 发布

codeLiuhy

最新推荐文章于 2025-06-19 17:39:03 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： h5基础篇文章标签： html css3

本文链接：https://blog.youkuaiyun.com/qq_42000660/article/details/118878731

h5基础篇专栏收录该内容

23 篇文章

订阅专栏

本文详细介绍了CSS3 transform属性的四种主要用法：位移translate、缩放scale、旋转rotate和斜切skew，通过实例演示了如何应用这些变换来实现动态效果。此外，还提到了transform注意事项，如变形不影响其他元素和正确的使用顺序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、transform介绍

1、位移 translate

transform: translateX(30px) / translateY(30px) / translateZ(30px)

分别代表元素在水平方向/竖直方向/垂直屏幕的方向移动的位置大小

特点

其和position：relative一样，元素相对于自己改变位置，不会脱离文档流，translate位移时，默认原点时元素的中心位置

2、放大与缩小scale

transform: scale(n)当n大于1时则为放大原来的n倍，当n小于1时，则为缩小

transform-origin: 0% 0%设置放大或者缩小的位置，默认为中心点即transform-origin: 50% 50%

3、旋转rotate

transform: rotateX(10deg) / rotateY(10deg) / rotateZ(10deg)

分别表示沿着X轴/Y轴/Z轴旋转，Z轴表示垂直于屏幕的方向

4、斜切skew

skewx: 单位角度，正值向左倾斜，负值向右倾斜。

skewy: 单位角度，正值向上倾斜，负值向下倾斜。

二、案例实现

原效果图：

代码实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{ margin: 0px;padding:0px;}
			.box{margin: 50px;}
			img{width: 160px;height: 160px;position: relative;transition: 1s 0.2s;}
			p{position: absolute;color: #fff;font-size: 14px;padding:0px 5px;left: 0px;}
			p:nth-child(2) {top: 115px;transition: 1s 0.2s;}
			p:nth-child(3) {top: 140px;transition: 1s 0.4s;}
			p:nth-child(4) {top: 165px;transition: 1s 0.6s;}
			p:nth-child(5) {top: 190px;transition: 1s 0.8s;}
			.box:hover p{
				transform: translateX(30px);
			}
			.box:hover img{
				transform: scale(1.3) rotateZ(15deg);
			}
		</style>
	</head>
	<body>
		<div class="box">
			<img src="1.jpg" />
			<p>如你默认 </p>
			<p>生死枯等</p>
			<p>枯等一圈</p>
			<p>又一圈的年轮</p>
		</div>
	</body>
</html>

三、transform注意事项：

1、变形操作不会影响其他元素；

2、变形操作只能添加给块元素，但是不能添加给内联元素。

3、符合写法，可以同时添加多个变形操作，执行是有顺序的，先执行后面的操作，再执行前面的操作。注： translate会受到rotate、scale、skew的影响。

4、transfor-origin：基点的位置：x、y、z（3d)