2D 转换 transform

• translate() 移动
• rotate() 转动
• scale() 比例
• skew() 歪斜
• matrix() 矩阵

transform:skew(30deg) scale(0.5,1) rotate(45deg) translate(10px,20px)
合写的写法

translate

根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动

<div style="width:200px;
			height:50px;
			line-height:50px;
			text-align:center;
			background-color:rgba(130,160,200,0.5);
			border-radius:5px;
			transform:translate(200px,50px);">
			移动位置
</div>

rotate

在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转

div
{
	width:200px;
	line-height:100px;
	font-size:20px;
	text-align:center;
	height:100px;
	background-color:#00EEEE;
	transform:rotate(-30deg);
	border-radius:4px;
	color:#FFF;
}

appleing

scale 缩放等级

scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：

<div style="background:purple;
			opacity:0.6;
			border-radius:5px;
			width:100px;
			transform:scale(3,1);
			color:orange;
			height:100px;">
			扩大三倍
			
</div>

扩大三倍

延伸:画一条0.5px的线

height: 1px;
transform: scale(0.5);

skew

transform:skew(<angle> [,<angle>]);

包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

+ skewX(<angle>);表示只在X轴(水平方向)倾斜。
+ skewY(<angle>);表示只在Y轴(垂直方向)倾斜。

<div style="width:200px;
	line-height:100px;
	font-size:20px;
	text-align:center;
	height:100px;
	background-color:#00EEEE;
	border-radius:5px;
	transform:skew(30deg,10deg);
	margin-top:50px;
	">1234</div>

1234

css3斜切坐标系 (opens new window)

matrix

matrix()方法和2D变换方法合并成一个。

matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

2D 转换方法

函数	描述
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)	定义 2D 转换，沿着 X 轴移动元素。
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)	定义 2D 缩放转换，改变元素的宽度。
scaleY(n)	定义 2D 缩放转换，改变元素的高度。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)	定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)	定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)	定义 2D 倾斜转换，沿着 Y 轴。

transform-origin

允许您更改转化元素位置

div{
		width:50px;
		height:50px;
		border-radius: 100px;
		margin:200px auto;
		background:orange;
		opacity:0.8;
		transform-origin: 200px 0;
		position:relative;
		left:-200px;
		animation: rotate1 10s infinite linear;
	}
	@keyframes rotate1{
		100% {
			transform:rotate(360deg);
		  }
	}

css3内容横向滚动

<template>
	<view class="followList">
		<view class="video-box">
			<view class="music-box">
				<view class="music">
					快乐崇拜嗨嗨嗨！！！！！
				</view>
			</view>
		 </view>
	</view>
</template>
<style>
.music-box{
	z-index:20;
	position:absolute;
	bottom: 10px;
	left:10px;
	width:100px;
	overflow: hidden;
}
.music{
	color: #FFFFFF;
	font-size: 14px;
	width:200px;
	animation: music 4s linear infinite;
}

@keyframes music{
	0%{
		transform:translate3d(80%,0,0)
	}
	100%{
		transform:translate3d(-80%,0,0)
	}
}
</style>