2d css3 of
two-dimensional planar space
css3 2d属性
变形属性 transform:;
2d变换:
位移 transform:translate();
旋转 transform:rotate();
缩放 transform:scale();
倾斜 transform:skew();
Displacement:
Transform: Translate (horizontal displacement, vertical displacement);
Transform: Translate (horizontal displacement);
transform:translateX(水平位移);
transform:translateY(垂直位移);
默认情况: 正值 从上往下,从左往右
Scale: transform: scale (both horizontal and vertical scaling);
Transform: Scale (horizontal scaling, vertical scaling);
Transform: scaleY (vertical discharge condensing X);
Transform: the scaleX (horizontal scaling);
ranges: narrow 0-0.9999999
1 The original size of
greater than 1 to enlarge
Rotational
transform: rotate (); a rotational degree deg
default center point the point of rotation
inclined: skew () deg
Transform: skew (horizontal inclination);
Transform: skew (horizontal, vertical);
Transform: the skewX ();
Transform: the skewY ();
selector: target {} is clicked when the pointing element, the style change
css样式 圆角:
border-radius:;
元素是正方形 宽度的一半px 50% 正圆
元素是长方形 较小值的一半px 半圆
50% 椭圆
css3 depth (3D space)
observed objects when near the far smaller
给父级元素添加:
transform-style:preserve-3d;形成3D的空间
perspective:800px;添加景深 形成近大远小的效果 900px-1200px
设置观察点:
perspective-origin:;
left right
top bottom
px
background:rgba(红,绿,蓝,透明度);
a 透明度 取值范围 0-1 背景颜色透明
2d: horizontal direction (x-axis) and the vertical direction (y-axis)
3D: a plurality of z-axis
of sight perpendicular to the z-axis is your screen, near the screen is the forward direction, away from the screen wire is reversed
3D功能函数:
3D的位移
translateX()
translateY()
translateZ()
3D的旋转
rotateX()
rotateX()
rotateZ()
3D的缩放
scaleX()
scaleY()
scaleZ()
transition :; transition needs to trigger events