CSS3快速上手之12：2D 转换

来源：互联网发布：aspen软件介绍编辑：程序博客网时间：2024/06/06 17:10

1.代码：

<!DOCTYPE html><html><head><meta charset="utf-8"> <title>网页title</title> <style> div{width:100px;height:75px;background-color:red;border:1px solid black;}/*---移动---*/div#id1{/*---translate值（150px，25px）是从元素最左边为起点移动150个像素，并从底部为起点移动25像素。---*/transform:translate(150px,25px);-ms-transform:translate(150px,25px); /* IE 9 */-webkit-transform:translate(150px,25px); /* Safari and Chrome */}/*---扭转---*/div#id2{transform:skew(30deg,20deg);-ms-transform:skew(30deg,20deg); /* IE 9 */-webkit-transform:skew(30deg,20deg); /* Safari and Chrome */}/*---旋转---*/div#id3{transform:rotate(45deg);-ms-transform:rotate(45deg); /* IE 9 */-webkit-transform:rotate(45deg); /* Safari and Chrome */}/*---放大---*/div#id4 {    margin: 150px;    width: 100px;    height: 70px;    background-color: yellow;    border: 1px solid black;    border: 1px solid black;/*---scale（2,3）转变宽度为原来的大小的2倍，和其原始大小3倍的高度。---*/    -ms-transform: scale(2,3); /* IE 9 */    -webkit-transform: scale(2,3); /* Safari */    transform: scale(2,3); /* 标准语法 */}</style></head><body><div>起点</div><div id="id1">移动</div><div id="id2">扭转</div><div id="id3">选转</div><div id="id4">放大</div></body></html>

2.结果：

0 0