平面转换、3D转换、动画

字体图标

iconfont 阿里图标库
从图标库引用素材

平面转换

transition: all 1s; 设置元素变换动画
transform: translate(px, px); 移动指定像素
transform: translate(x%, y%); 相对自身百分比移动
transform: translateX(值) 或 translateY(值)
transform: rotate(360deg); 可自定义旋转点
transform: scale(1.2); 缩放倍数
background-image: linear-gradient(颜色1,颜色2,颜色3);

平移应用

绝对定位中实现盒子居中

    .box {
      
      
        position: absolute;
        top: 50%;
        left: 50%;
        width: 200px;
        height: 100px;
        background-color: pink;
        transform: translate(-50%, -50%);
    }

实现双开门效果
鼠标悬浮海报时，海报左右分开，向两侧退去，显现主题内容。
利用CSS精灵图原理将海报左右分开。

* {
      
      
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.box {
      
      
    margin: 50px auto;
    height: 600px;
    width: 1000px;
    background-size: 1000px;
    background-image: url(images/pik_lightning.jpg);
    overflow: hidden;
}
.box::before,
.box::after {
      
      
    content: '';
    float: left;
    width: 50%;
    height: 600px;
    background-size: 1000px;
    background-image: url(images/pik_poster.jpg);
    transition: all 1s;
}
.box::after {
      
      
    background-position: right 0;
}
.box:hover::before {
      
      
    transform: translateX(-100%);
}
.box:hover::after {
      
      
    transform: translateX(100%);
}

<body>
    <div class="box">

    </div>
</body>

旋转应用

车轮滚动：平移+旋转

.wheel {
      
      
    transform: translateX(100px) rotate(360deg);
}

缩放应用

播放按钮缩放
transform: scale(5); opacity: 0;

渐变应用

使图片半遮罩，清晰显示文字。
background-image: linear-gradient(transparent,rgba(0,0,0,.6));

空间转换

transform: translate3d(x,y,z);
transform: translateZ(值);
perspective: 人眼到屏幕的距离px; 实现透视
配合 transform: translateZ(值)
transform: rotateX(值);
transform: rotateY(值);
transform: rotateZ(值); 同rotate(值)
transform: rotate3d(x,y,z,deg); 自定义轴
transform: scaleZ(倍数);

3D旋转应用

立体呈现轮播图
添加 transform-style: preserve-3d;

.cube {
      
      
    position: relative;
    width: 200px;
    height: 200px;
    margin: 100px auto;
    transition: all 2s;
    transform-style: preserve-3d;
}
.cube div {
      
      
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
}
.front {
      
      
    background-color: orange;
    transform: translateZ(200px);
}
.back {
      
      
    background-color: green;
}

.cube:hover {
      
      
    transform: rotateY(180deg);
}

<div class="cube">
    <div class="front">前面</div>
    <div class="back">后面</div>
</div>

3D导航栏(翻牌效果)
与上同理，只需摆放合适的空间立体位置即可。

动画

两个状态间的变化过程可以用过渡实现；多个状态间的变化过程用动画(重复播放、最终画面、是否暂停)

定义动画：

@keyframes {
    0% {}
    50% {}
    110% {}
}

使用动画 animation: 动画名称动画时长速度曲线延迟时间循环次数动画方向执行完毕时状态;
速度曲线：线性动画linear、分部动画steps()
循环次数：循环次数、无线循环infinite
动画方向：正反向alternate
执行完毕时状态：默认值backwards、forwards(需去掉 infinite alternate)
animation-play-state: pause 暂停动画，配合:hover用。
animation-timing-function: steps(N) 逐帧动画，制作精灵动画时。
animation: 动画1, 动画2, 动画3; 调用多组动画

应用

精灵图动画
跑马灯展示

六、CSS 速览 —— 平面转换、3D转换、动画

平面转换、3D转换、动画

平面转换

平移应用

旋转应用

缩放应用

渐变应用

空间转换

3D旋转应用

动画

应用

猜你喜欢