一、css3里面的2D
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box{
margin: 250px auto;
width: 200px;
height: 200px;
border: 1px solid #000;
/*设置2D转化
translate(x,y) 可以分开写,默认x
translate优点:不会影响到其他元素的位置
translate中的百分比单位是相对与自身元素的,对行内标签无效
*/
/*transform:translateX(20px);*/
/*
scale (x,y)
里面写的数字不跟单位就是倍数的意思,1就是1倍,0.5就是缩放
优势:不会影响其他元素,可以设置中心点
*/
/*transform: scale(0.5);*/
/*
变形
skew 两个值 第一个 x水平倾斜 第二个 y 垂直倾斜
一个值代表两个值
*/
/*transform: skew(45deg,30deg);*/
/*
后两个是平移
第二个第三个 scale
第一个第四个 skew
cos 角度 是顺时针走的
*/
/*transform: matrix(0.866,1,1,0.866,0,0);*/
/*
rotate 角度为正顺时针旋转
origin 设置旋转中心 默认选择中心点是元素的中心点
x y 可以设置像素或方位名词
*/
/*transform: rotate(45deg);*/
/*transform-origin:50% 50%;*/
/*
综合写法:
顺序会影响转换的效果(先旋转会改变坐标轴方向)
同时有位移和其他属性的时候,最好将位移放到最前面
*/
transform-origin: 50% 50%;
/*transform: translatex(100px) rotatez(45deg) scale(.5);*/
transform: rotatez(45deg) translatex(100px);
}
</style>
</head>
<body>
<!--
css3 动画 2d 3d 过渡 动画
2d: translate 平移 rotate 旋转