css变换

最新推荐文章于 2022-11-12 19:13:55 发布

我的天才女友

最新推荐文章于 2022-11-12 19:13:55 发布

阅读量65

点赞数

分类专栏： css 文章标签： css html5

本文链接：https://blog.csdn.net/qq_40801987/article/details/120794657

版权

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

囊空不办寻春马，眼乱行看择婿车。

transform

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>变换</title>
		<link rel="stylesheet" href="transform.css" />
	</head>
	<body>
		<div class="box">one</div>
	</body>
</html>

.box{
	box-sizing: border-box;
	width: 150px;
	margin: 0 2em;
	padding: 60px 0;
	text-align: center;
	background-color: hsl(150,50%,40%);
}

初始样式

rotate

旋转元素 rotateX、rotateY、rotateZ围绕不同的轴去旋转元素，我们给元素设置rotate(30deg)，元素就会绕着元素自生的中心旋转30deg。

.box{
	transform: rotate(30deg);
}

在这里插入图片描述
如果单独指定rotateX(180deg)，元素就会翻转过来

翻转180deg
可以指定backface-visibility: hidden;翻转180度就会不显示。翻转的时候可以指定不同的透视距离，perspective和透视的视角perspective-origin

translate

平移元素，元素会向右平移40px,然后在向下平移20px。

transform: translate(40px,20px);

scale

缩放元素，将元素进行缩放

transform: scale(0.4);

scale

skew

倾斜元素

transform: skew(15deg);

skew

transform-origin

默认元素变换都是从元素的中心变换的,transform-origin可以设置元素的变换中心点

多重变换

transform:rotate(15deg),translate(15px,0);

多重变换，是按照从右往左的顺序执行的，这里会先执行向右平移15px,然后向左旋转15度。

我的天才女友

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
css变换

囊空不办寻春马，眼乱行看择婿车。transform<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>变换</title> <link rel="stylesheet" href="transform.css" /> </head> <body> <div class="box">one&lt.
复制链接

扫一扫