| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566 |
- <!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: 300px;
- height: 300px;
- background-color: aqua;
- margin: 300px auto;
- /* transform: skewX(45deg); */
- /* transform: rotateZ(90deg); */
- /* transform: scale(2); */
- /* transform: translate(200px,-200px); */
- /* transform: scale3d(2,2,2); */
- /* transform: translateZ(10px); */
- }
- </style>
- </head>
- <body>
- <!--
- transform 用于实现变形（形变位不变）IE8及以下不支持
- 元素本身的位置（大小、坐标）没有发生变化，并且不占位
- Transform：translate | scale | skew | rotate
- 功能：transform主要是用来对元素进行2d或3d变换的
- Translate：是用来做位移的
- Scale：是用于缩放的
- Skew：是用于倾斜的
- Rotate：是用于旋转的
- 直接使用以上属性是2d变换，在单词后面加上3d是做3d变换；
- 1.transform:skew();
- 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：rotate3d(4个参数) rotate3d(1 1 1,30deg);
- rotate3d后面必须指清旋转的3个方向
- 3. transform:scale:表示缩放
- transform:scale(2)表示宽度和高度一起缩放
- transform:scaleX(2)=transform:scale(2,1):表示宽度为原来的2倍
- transform:scaleY(2)=transform:scale(1,2):表示高度为原来的2倍
- transform:scale3d(2,2,2)如果有3d限定 必须传3个参数
- 4.如果只有一个值，默认表示X轴位移
- X轴：正值表示向右移动，负值表示向左移动
- Y轴：正值表示向下移动，负值表示向上移动
- transform:translateX(300px)表示元素向右移动300px
- translateY(200px)==translate(0,200px)表示元素向下移动200px
- translate3d()括号中必须有3个参数：加快CPU的运行
- transform:translateZ();近大远小
- -->
- <div id="box"></div>
- </body>
- </html>
|
