css3 2d转换
<!DOCTYPE html>
<html>
<head>
<title>2D转换</title>
<style type="text/css">
.box{
width: 400px;
height: 400px;
margin: 100px auto;
position: relative;
}
img:nth-child(1){
width: 400px;
height: 400px;
}
img:nth-child(2){
width: 150px;
height: 200px;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
/*translate平移 单位px 也可以使用百分比
translate()只写一个值的时候代表的是x的偏移 两个参数代表是x，y的偏移
*/
/*transform: translateY(10%) translateX(10%);*/
/*transform: translate(10px,100px);*/
/* scale 单位是数值 缩放 scaleX()代表在x方向上缩放 scaleY()代表在y轴上缩放
scale()只有一个值的时候代表xy方向上都进行缩放
不能为负值 负值时取的是绝对值*/
/*transform: scale(2);*/
/*skew 单位是deg角度
skew()只有一个参数的时候 代表在x轴上倾斜 两个参数的时候代表分别在xy轴上倾斜*/
/*transform: skew(10deg,20deg);*/
/*rotate旋转单位是角度 rotateX代表绕着x轴顺时针旋转
rotateY代表绕着y轴顺时针旋转
rotate()一个参数的时候代表在Z轴上旋转 不能多个值*/
transform: rotate(20deg);
/*transform-origin可以来决定旋转的位置 默认的是50% 50%
也可以设置成关键词如left top center center等等*/
transform-origin: center center;
}
</style>
</head>
<body>
<div class="box">
<img src="img/bg-grid.jpg">
<img src="img/dameizi.jpeg">
</div>
</body>
</html>
