css3中的2d
二维的平面空间
css3 2d属性
变形属性 transform:;
2d变换:
位移 transform:translate();
旋转 transform:rotate();
缩放 transform:scale();
倾斜 transform:skew();
位移:
transform:translate(水平位移,垂直位移);
transform:translate(水平位移);
transform:translateX(水平位移);
transform:translateY(垂直位移);
默认情况: 正值 从上往下,从左往右
缩放: transform:scale(水平垂直都缩放);
transform:scale(水平缩放,垂直缩放);
transform:scaleY(垂直缩X放);
transform:scaleX(水平缩放);
取值范围: 0-0.9999999 缩小
1 原来大小
大于1 放大
旋转
transform:rotate(); 旋转是一个度数 deg
默认情况 中心点为旋转点
倾斜: skew() deg
transform:skew(水平倾斜);
transform:skew(水平,垂直);
transform:skewX();
transform:skewY();
选择器:target{} 当元素被点击时的指向,发生样式的改变
css样式 圆角:
border-radius:;
元素是正方形 宽度的一半px 50% 正圆
元素是长方形 较小值的一半px 半圆
50% 椭圆
css3 景深 (3D的空间)
观察物体的时候 近大远小
给父级元素添加:
transform-style:preserve-3d;形成3D的空间
perspective:800px;添加景深 形成近大远小的效果 900px-1200px
设置观察点:
perspective-origin:;
left right
top bottom
px
background:rgba(红,绿,蓝,透明度);
a 透明度 取值范围 0-1 背景颜色透明
2d: 水平方向(x轴) 和 垂直方向(y轴)
3d: 多了一个z轴
z轴就是你对屏幕垂直的视线,靠近屏幕的方向就是正向,远离屏幕的线是反向
3D功能函数:
3D的位移
translateX()
translateY()
translateZ()
3D的旋转
rotateX()
rotateX()
rotateZ()
3D的缩放
scaleX()
scaleY()
scaleZ()
transition:; 过渡 需要事件触发