| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- <style>
- * {
- margin: 0;
- padding: 0;
- }
- #box {
- width: 200px;
- height: 200px;
- background: plum;
- margin: 100px auto;
- transform: translateY(100px);
- /* transform: scaleY(2); */
- /* transform: rotate(30deg); */
- /* transform: rotateZ(30deg); */
- /* transform: skewY(40deg); */
- /* transform: skew(80deg,40deg); */
- }
- </style>
- </head>
- <body>
- <!--
- transform 用于实现变形（形变位不变）IE8及以下不支持
- 元素本身的位置（大小、坐标）没有发生变化，并且不占位
- Transform：translate | scale | skew | rotate
- 功能：transform主要是用来对元素进行2d或3d变换的
- Translate：是用来做位移的
- Scale：是用于缩放的
- Skew：是用于倾斜的
- Rotate：是用于旋转的
- 直接使用以上属性是2d变换，在单词后面加上3d是做3d变换；
- 1. transform:skew()/skewX()/skewY();
- skew:用于完成倾斜（扭曲）
- deg：表示度数，默认情况下表示x轴倾斜
- x y 不区分大小写
- skew(15deg,30deg)两个参数表示x y轴同时变形
- skew不支持z轴。最多只能传两个参数
- 2. transform：rotate(45deg) 默认是Z轴
- rotate：用于旋转,单位deg
- transform：rotateX(45deg)沿x轴水平旋转
- transform：rotateY（45deg）沿Y轴垂直旋转
- transform：rotateZ（45deg）沿Z轴旋转
- 3. transform:scale:表示缩放
- transform:scale(2)表示宽度和高度一起缩放
- transform:scaleX(2)=transform:scale(2,1):表示宽度为原来的2倍
- transform:scaleY(2)=transform:scale(1,2):表示高度为原来的2倍
- 4. transform:translate 位移
- 如果只有一个值，默认表示X轴位移
- X轴：正值表示向右移动，负值表示向左移动
- Y轴：正值表示向下移动，负值表示向上移动
- transform:translateX(300px)表示元素向右移动300px
- translateY(200px)==translate(0,200px)表示元素向下移动200px
- -->
- <div id="box"></div>
- </body>
- </html>
|
