2D变换 ( 2D Transform )
transform 属性
- 语法:
transform:none | <transform-function>
- function list:
translate(),rotate(),scale(),skew(),matrix()
- 默认值:none
- 适用于:所有块级元素及某些内联元素;
- 继承性:无;
- 属性值解析:
- translate(x,y) :定义 2D 转换,沿着 X 和 Y 轴移动元素。
- translateX(n) :定义 2D 转换,沿着 X 轴移动元素。
- translateY(n):定义 2D 转换,沿着 Y 轴移动元素。
- rotate(angle):定义 2D 旋转,在参数中规定角度。
- scale(x,y) :定义 2D 缩放转换,改变元素的宽度和高度。
- scaleX(n) :定义 2D 缩放转换,改变元素的宽度。
- scaleY(n) :定义 2D 缩放转换,改变元素的高度。
- skew(x-angle,y-angle) :定义 2D 倾斜转换,沿着 X 和 Y 轴。
- skewX(angle) :定义 2D 倾斜转换,沿着 X 轴。
- skewY(angle) :定义 2D 倾斜转换,沿着 Y 轴。
- matrix(n,n,n,n,n,n) :定义 2D 转换,使用六个值的矩阵。matrix 方法有六个参数,包含旋转,缩放,移动(平移)和倾斜功能。
transform 译:变动
#box{
transform: translate(200px,200px);
transform: rotate(30deg); 正值顺时针选择,负值逆时针旋转
transform-origin: 50% 50%; 所有的百分比都是参照图像的宽高,可以改变参照点,50%是中心点
transform: scale(0.5,.5); 缩放,50%,默认根据中心点缩放,只有一个值时表示xy轴一样,等比缩放。
transform: skew(30deg,30deg); 2D倾斜
transform: matrix(n,n,n,n,n,,n)旋转,缩放,移动(平移)、倾斜
}
3D转换 ( 3D Transform)
transform-style@3
属性描述: 设置或获取嵌套元素是怎样在三维空间中呈现
语法模板:
transform-style: flat|preserve-3d
默认值: flat
中:平面
属性值描述:
flat: 表示所有子元素在2D平面呈现;
preserve-3d: 表示所有子元素在3D空间中呈现;
适用元素: 所有元素
是否具有继承性: 否
是否具有动画性: 是
脚本接口: transformStyle
perspective
属性描述: 设置或获取透视距离
语法模板:
perspective: number|none
默认值: none
属性值描述:
number:元素距离视图的距离,以像素计;
none:默认值。与 0 相同。不设置透视;
适用元素: 3d视图内的元素
是否具有继承性: 否
是否具有动画性: 是
脚本接口: perspective
perspective-origin
属性描述: 设置或获取 3D 元素的底部位置
语法模板:
perspective-origin: <x-axis> <y-axis>
<x-axis> = left center right length percentage
<y-axis> = top centerbottom length percentage
默认值: 50% 50%
属性值描述:
x-axis 定义该视图在 x 轴上的位置。默认值:50%;
y-axis:定义该视图在 y 轴上的位置。默认值:50%;
适用元素: 具有perspective属性的元素
是否具有继承性: 否
是否具有动画性: 是
脚本接口: perspective-origin
backface-visibility@3
属性描述: 设置或获取元素不面向屏幕时是否可见
语法模板:
backface-visibility: visible|hidden
默认值: visible
属性值描述:
visible:背面是可见的;
hidden:背面是不可见的;
适用元素: 3d元素
是否具有继承性: 否
是否具有动画性: 是
脚本接口: backfaceVisibility
translateX(x) 定义 3D 转化,仅使用用于 X 轴的值。
translateY(y) 定义 3D 转化,仅使用用于 Y 轴的值。
translateZ(z) 定义 3D 转化,仅使用用于 Z 轴的值。
scaleX(x) 定义 3D 缩放转换,通过给定一个 X 轴的值。
scaleY(y) 定义 3D 缩放转换,通过给定一个 Y 轴的值。
scaleZ(z) 定义 3D 缩放转换,通过给定一个 Z 轴的值。
rotateX(angle) 定义沿 X 轴的 3D 旋转。
rotateY(angle) 定义沿 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿 Z 轴的 3D 旋转
详细描述创建 3d
动画的必备条件。
外部必须有两层包裹,否则无法实现
3D
效果最外层必须拥有透视距离空间
perspective:1400px;
所有要设计3D动画的父级元素必须添加
transform-style: preserve-3d;
<style>
#container{
perspective:1400px; 模拟3D效果离眼睛的距离,1200-1600的距离最好
}
</style>
<body>
容器 第一层容器,用于添加透视距离,没有容器就没有3D空间
<div id="container">
<div id="wrap"> 包裹 第二层是辅助层
第三层是内容盒子
<div class="face">1</div>
<div class="face">2</div>
</div>
</div>
</body>
transform: matrix3d(x,y,z,deg) scale3d(x,y,z);
(x,y,z)与原点连线,这条线是元素旋转时参照的轴