标签：相对 空间 ack scale margin nsf 梯度 origin 设置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .box{ width: 200px; height: 100px; background-color: #ff0789; transform: translateY(100px); } </style> </head> <body> <div class="box"></div> <!-- transform 设置元素的变换形式 平移变换 transform:translate(x,y); 像素值 百分比(相对于自身) transform: translateX(100px); transform: translateY(100px); transform: translateX(100px) translateY(100px); x 表示水平轴的位移量 y 表示竖直轴的位移量 旋转变换 旋转中心点是对角线的交点 transform: rotate(0deg); 单位 deg 度数 一个圆有360deg rad 弧度 一个圆有2πrad grad 梯度 一个圆有400grad turn 圈数 一个圆有1turn 正值顺时针 负值逆时针 修改中心点 transform-origin: center center; 默认 方位值 百分比 像素值 和background-position的取值一样 缩放变换 transform: scale(2,3) 负值表示反转前边为水平反转 后边为竖直反转 前边表示水平放大倍数 后边表示竖直放大倍数 两个值一样可以合并 倾斜变换 transform: skew(0,0); transform: skewX(0deg) 默认是center center这个点拉伸的 skewX的x轴和y轴是相反的 x轴和长方形的夹角度就是skewX的值 skewY是正常的 y轴和长方形的夹角度就是skewY的值 一个元素可以同时做多种变换 写复合元素的时候 注意先后顺序 旋转会改变x和y轴 3D网页的基本构成 = 舞台 + 在3D空间占据的位置 + 摄像头 --> </body> </html>
标签：相对 空间 ack scale margin nsf 梯度 origin 设置
原文地址：https://www.cnblogs.com/zhangyu666/p/11477348.html
