2d转换——transform

其实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>
好了,下课

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值