CSS3旋转实例

在CSS3中transform主要包括以下几种:旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。

1、旋转rotate() :通过指定的角度参数对原元素指定一个2D rotation(2D 旋转),angle是指旋转角度,如果设置的值为正数表示顺时针旋转,负数则表示逆时针旋转。如:transform:rotate(30deg)。

2、扭曲skew( [, ]) :X轴Y轴上的skew transformation(斜切变换)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则值为0,也就是Y轴方向上无斜切。skew是用来对元素进行扭曲变行,第一个参数是水平方向扭曲角度,第二个参数是垂直方向扭曲角度。其中第二个参数是可选参数,默认为0deg。

3、缩放scale([, ]):提供执行[sx,sy]缩放矢量的两个参数指定一个2D scale(2D缩放)。如果第二个参数未提供,则取与第一个参数一样的值。scale(X,Y)是用于对元素进行缩放,可以通过transform-origin对元素的基点进行设置,同样基点在元素中心位置;基中X表示水平方向缩放的倍数,Y表示垂直方向的缩放倍数,而Y是一个可选参数,如果没有设置Y值,则表示X,Y两个方向的缩放倍数是一样的。并以X为准。如:transform:scale(2,1.5)。

4、移动translate([, ]) :通过矢量[tx, ty]指定一个2D translation,tx 是第一个过渡值参数,ty 是第二个过渡值参数选项。如果 未被提供,则ty以 0 作为其值。也就是translate(x,y),它表示对象进行平移,按照设定的x,y参数值,当值为负数时,反方向移动物体,其基点默认为元素 中心点,也可以根据transform-origin进行改变基点。如transform:translate(100px,20px)。

5、矩阵变形matrix(, , , , , ) : 以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向(X轴)和垂直方向(Y轴)重新定位元素,此属性值使用涉及到数学中的矩阵。

css3旋转实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS3旋转实例</title>
	</head>
	<style>
		.photo-container {
			perspective: 1200px; /* 透视视图 */
			width:45%;
			float:left;
		}
		.rotate-box {
			position:relative;
			transform-style: preserve-3d; /* 3D 转换 */
			transition:1s ease; /* 转换效果持续 1秒 */
			margin:10%;
		}
		.rotate-box img {
			width:100%;
			height:auto;
		}
		.text {
			position:absolute;top:0;
			width:100%;height:100%;
			transform: rotateY(180deg) translateZ(1px); /* 反转180度 并设置z轴让其置于图片背面 */
			color:#666;
			text-align:center;
			opacity:.06;
			background:rgba(255,255,255,.9);
			transition: 1s opacity;
		}
		.photo-container:hover .rotate-box{
			transform: rotateY(180deg);
		}
		.photo-container:hover .text{
			opacity:1;
		}
		.rotate-box:after {
			content:' ';
			display:block;
			width:100%;
			height:7vw; /* vw是移动设计备窗体单位*/
			transform:rotateX(90deg);
			background-image: radial-gradient(ellipse closest-side, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%); /* radial-gradient 是径向渐变 */
		}
	</style>
	<body>
		<div class="photo-container">
			<div class="rotate-box">
				<img src="img/beijing.png"/>
				<div class="text">
					<h2>这是一个标题</h2>
					<p>这是一段图片相关的简介内容。。</p>
				</div>
			</div>
		</div>
	</body>
</html>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值