CSS3(二)

6、2D转换

CSS3(二)

转换也是CSS3的特性之一,可以实现元素的位移translate、旋转rotate、缩放scale等效果

所谓2D转换是指二维平面内进行转换

6.1 移动

transform:translate(x, y);  
/* 或者分开写 */
transform:translateX(n);
transform:translateY(n);

注意:

  • translate 不会影响到其它元素的位置,不脱标,但是会覆盖其它元素,类似相对定位
  • translate 百分比单位是相对自身的 translate(50%, 50%)
  • 切记:对行内标签没有效果

6.2 旋转 rotate

2D旋转指的是让元素在2维平面内顺时针或逆时针旋转

/* 旋转45度 */
transform: rotate(45deg)
  • 默认的旋转中心是元素的中心

6.3 转换中心 transform-origin

transform-origin 用来设置转换的中心

transform-origin: x y;
  • 参数x,y是用空格隔开的
  • x, y ,默认是元素的中心点(50%, 50%)
  • x,y 可以是像素点 或 方位词

6.4 缩放 scale

scale 可以放大或缩小元素

transform: scale(x, y);
  • x,y 是用逗号隔开
  • scale(1, 1):宽和高都放大一倍,可简写成 scale(1)
  • 相应的 scale(0.5) 就是缩小一倍
  • 不影响其它盒子

6.5 2D综合写法

tranform:translate() rotate() scale();
  • 先转换会改变坐标轴方向
  • 当我们同时有唯一和其它属性的时候,记得要将位移放到最前面

7、3D转换

先说下规则:

只有y轴比较特殊,是垂直向下的

  1. x轴 :水平向右 注意:x右边是正值,左边是负值
  2. y轴:垂直向下 注意:y下面是正值,上面是负值
  3. z轴:垂直屏幕 注意:往外是正值,往里面是负值

3D平时最常用的就是3D位移和3D旋转,而且3D一般都会结合透视

  1. 3D位移:translate3d(x,y,z)
  2. 3D旋转:rotate3d(x,y,z)
  3. 透视:perspective
  4. 3D呈现 transform-style

7.1 3D移动 translate3d

/* 仅仅是在X轴上移动 */
transform:translateX(100px)
/* 仅仅在Y轴上移动 */
transform:translateY(100px)
/* 仅仅在Z轴上移动 */
transform:translateZ(100px)
/* 其中x,y,z 分别指要移动的轴的方向的距离 */
transform:translate3d(x, y, z)

7.2 透视 prespective

prespective 就是在二维的平面产生远大近小的视觉立体

  1. 如果想在网页中产生3D效果需要透视(劣迹成3d投影到2d)
  2. 透视我们也称为视距:视距是人的眼睛到屏幕的距离,其单位是像素
  3. 距离视觉点越近的在电脑平面成像越大,越远成像越小

让物体变大有两种方法:

  1. 透视变小:就眼睛离物体距离变小
  2. z 轴变大:物体距离的成像平面距离变大(靠近眼睛)

透视写在被观察父盒子的上面

body {
    /* 透视写到被观察父元素盒子的上面, 透视越小,盒子越大 */
    perspective: 150px;
}

div {
    width: 100px;
    height: 100px;
    background-color: pink;
    transform: translate3d(500px, 100px, 100px)
}

7.3 3D旋转 rotate3d

3d旋转是可以让元素在三维平面内沿着x、y、z轴或者 自定义轴进行旋转

/* 沿着X轴正方向旋转45度 */
transform:translateX(45deg)
/* 沿着Y轴正方向旋转45度 */
transform:translateY(45deg)
/* 沿着Z轴正方向旋转45度 */
transform:translateZ(45deg)
/* 沿着自定义轴旋转,deg为角度度(了解即可) */
transform:translate3d(x, y, z)

左手定则:

  1. 左手的手拇指指向x/y轴的正方向
  2. 其余手指的弯曲方向就是该方向沿着x/y轴旋转的方向

栗子:鼠标经过盒子 盒子转动

.demo2 {
    width: 100px;
    height: 100px;
    background-color: blue;
    transition: all 2s;
}

.demo2:hover {
    transform: rotateZ(360deg);
}

7.4 3D呈现 transform-style

  1. 控制子元素是否开始三维立体三维环境
  2. transform-style: flat; 子元素不开启3D立体空间(默认的)
  3. transform-style: preserve-3d; :子元素开启立体空间
  4. 代码写给父级,但是影响的是子盒子
  5. 这个属性很重要

8、动画

CSS3(二)

动画是CSS3具有的特征之一,可以通过设置多个节点来精准控制一组动画,常用来实现复杂的动画效果

8.1 基本使用步骤

制作动画分两步:

  1. 先定义
  2. 再使用

1、用 @keyframes 定义动画

@keyframes move {
    /* 开始的地方 */
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(1000px, 0);
    }
    50% {
        transform: translate(1000px, 400px);
    }
    75% {
        transform: translate(0, 400px);
    }
    100% {
        transform: translate(0, 0);
    }
}
  1. 0% 是动画的开始,100%是动画的完成
  2. 建议用百分比来规定变化发生的时间,如果只有开始和结束,也可以用关键词 fromto ,等同于 0%100%

注意:每一段动画的时间是平分的,所以为了让动画顺畅,一般让每段移动的距离都相同

2、 调用动画

div {
    width: 100px;
    height: 100px;
    background-color: pink;
    /* 动画名称 */
    animation-name: move;
    /* 持续时间 */
    animation-duration: 3s;
}

8.2 常用属性

属性 描述
@keyframes 规定动画属性
animation 所有动画属性的简写属性,除了 animationplay-state 属性
animation-name 规定 @keyframes 动画的名称
animation-druation 规定动画完成一个周期所花费的秒或毫秒,默认是0 (必须的)
animation-timeing-function 规定动画的速度曲线,默认是 ease
animation-delay 规定动画何时开始,默认是0
animation-iteration-count 规定动画被播放的次数,默认是1,还有 infinite 循环播放
animation-direction 规定动画是否在下一周期逆向播放,默认是 normal, 逆播放:alternate
animation-play-state 规定动画是否正在运行或暂停。默认是 running, 还有 paused
animation-fill-mode 规定动画结束后状态,保持: forwards 回到起始: backwards

其中,animation-nameanimation-druation 是必须的

animation-play-state 一般与鼠标点击或者经过一起使用

8.3 速度曲细节

animation-timing-function:规定动画速度曲线

描述
linear 动画从头到尾的速度是相同的,均匀
ease 默认。动画以低速开始,中间加快,在结束前变慢
ease-in 动画以低速开始
ease-out 动画以低速结束
ease-in-out 动画以低速开始和结束
steps() 指定了时间函数中的间隔数量

8.4 属性简写

animation : 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束的状态

animation:myfirst 5s linear 2s infinite alternate;
上一篇:JS时间差计算(毫秒/天数/月份)


下一篇:python+opencv+pyqt5控制摄像头在Qlabel上显示