|
|
@@ -0,0 +1,63 @@
|
|
|
+<!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>
|
e