| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667 |
- <!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>
- #box{
- width: 200px;
- height: 200px;
- font-size: 12px;
- background: pink;
- /* transform: scaleY(0.5); */
- /* transform: translateY(100px); */
- /* transform: rotateX(120deg); */
- transform: skew(30deg,30deg);
- }
- </style>
- </head>
- <body>
- <!--
- transform
- 缩放:scale
- 位移:translate
- 旋转:rotate
- 倾斜:skew
- -->
- <!--
- 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">
- 11111
- </div>
- </body>
- </html>
|
