2d转换——transform

最新推荐文章于 2023-01-12 11:39:31 发布

XBQ0510Qi

最新推荐文章于 2023-01-12 11:39:31 发布

阅读量398

点赞数

分类专栏： html/css 文章标签： transform 2d转换

本文链接：https://blog.csdn.net/XBQ0510Qi/article/details/79069362

版权

html/css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

其实css的设计也是源于日常，首先我在这里简单的介绍一下transform，其实就是旋转，在我们的现实生活中，一个物体可以在一个空间坐标系中任意旋转，css的设计也是如此，我们就以一个简单的div为例来做一下解释，在css2d转换中，其实也是将元素放在一个空间坐标系里面进行的旋转的，其中x是水平方向（箭头向右），y是屏幕的垂直方向（箭头向下），而z是面对我们的这个方向，明白这个坐标系之后我们就开始说说transform的rotate，默认rotate就是rotateZ，还有rotateX和rotateY的取值，先来感受一下默认的rotate是什么效果

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div {
				height: 438px;
				width: 310px;
				margin: 0 auto;
				border: 1px solid #000;
				margin-top: 200px;
				perspective: 500px;
				background-color: deepskyblue;
			}
			
			div img {
				transform: rotate(45deg);
			}
			
		</style>
	</head>

	<body>
		<div>
			<img src="images/pk.png" alt="扑克" />
		</div>
	</body>

</html>

一张图片rotate(45deg)的效果，就是默认的以其中心为Z轴轴心旋转了45度之后的效果

当然了，以我们在现实生活中的经验，肯定不是所有的旋转只能以中心为参照点，css自然也会想到这个，那么transform-origin属性就是规定旋转的原点，比如我们规定原点是0 0,那么旋转的原点就是左上角，对吧

div img {
	transform: rotate(45deg);
	transform-origin: 0px 0px;
}

效果如下：

关于rotateZ就这两个概念，给你一个原点，给你一个角度，自己去慢慢转去吧！！！

说完Z方向上的，我们看看比较复杂的rotateX和rotateY，这两个方向上的旋转需要配合另一个属性使用，因为x和y轴的旋转主要是为了实现一个透视效果（近大远小），而这个配合使用的属性是perspective:length;而且这个属性必须要写在要旋转的元素的父元素或者祖先元素上，建议是父元素上

<style type="text/css">
			div {
				height: 438px;
				width: 310px;
				margin: 0 auto;
				border: 1px solid #000;
				margin-top: 200px;
				perspective: 500px;
				background-color: deepskyblue;
			}
			
			div img {
				transform: rotateX(70deg);
				transform-origin:center;
			}
			
</style>

效果如下，首先rotateX(70deg)表示绕X旋转70度，transform-origin:center表示x轴所在的地方，可以去center，top，bottom，或者自定义的高度，是不是很神奇，绕Y轴的旋转也是一样的道理，自己多上手练练，有机会使用就多使用一下，因为不适用迟早会忘记

这里我结合过渡属性和旋转属性做一个类似开门的效果，直接上代码吧，有兴趣的同学看一下，换个图片就行，很简单，不管是做什么，先分析再下手，别一上来就开始写

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div {
				height: 438px;
				width: 310px;
				margin: 0 auto;
				border: 1px solid #000;
				margin-top: 200px;
				perspective: 500px;
				background-color: deepskyblue;
			}
			
			div img {
				transform-origin:left;
				transition:transform 2s;
			}
			
			div:hover img{
				transform: rotateY(80deg);
			}
		</style>
	</head>

	<body>
		<div>
			<img src="images/pk.png" alt="扑克" />
		</div>
	</body>

</html>

好了，下课