CSS3 3D立方体

CSS3 3D立方体
1
2
3
4
5
6

HTML

<div class="wrap">
    <div class="box">
        <div class="face front">1</div>
        <div class="face back">2</div>
        <div class="face right">3</div>
        <div class="face left">4</div>
        <div class="face top">5</div>
        <div class="face bottom">6</div>
    </div>
</div>

CSS

.wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 500px;
    width: 100%;
    background: linear-gradient(skyblue, khaki);
    perspective: 400px;
}

.box {
    width: 100px;
    height: 100px;
    transform-style: preserve-3d;
    transform: rotateX(-35deg) rotateY(30deg) rotateZ(0deg);
    animation: rotate linear 3s infinite;
}

.face {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: inherit;
    font-size: 60px;
    color: #fff;
}

.front {
    background: rgba(90, 90, 90, .7);
    transform: translateZ(50px);
}

.back {
    background: rgba(0, 210, 0, .7);
    transform: rotateY(180deg) translateZ(50px);
}

.right {
    background: rgba(210, 0, 0, .7);
    transform: rotateY(90deg) translateZ(50px);
}

.left {
    background: rgba(0, 0, 210, .7);
    transform: rotateY(-90deg) translateZ(50px);
}

.top {
    background: rgba(210, 210, 0, .7);
    transform: rotateX(90deg) translateZ(50px);
}

.bottom {
    background: rgba(210, 0, 210, .7);
    transform: rotateX(-90deg) translateZ(50px);
}
@keyframes rotate {
    0% {
        transform: rotateX(-35deg) rotateY(0deg) rotateZ(0deg)
    }
    100% {
        transform: rotateX(-35deg) rotateY(360deg) rotateZ(0deg)
    }
}

Read more

Flutter入门指南

Flutter入门指南

Flutter 是一个由 Google 开发的开源移动应用开发框架。它允许开发者使用一套代码同时构建 iOS 和 Android 应用,并且提供了丰富的 UI 组件和高效的开发工具,使得开发者能够快速构建出高性能的跨平台应用。 一、Flutter 的实现原理 Flutter 的核心在于其自带的高性能渲染引擎 Skia。不同于其他框架依赖于原生的 UI 组件,Flutter 直接通过 Skia 渲染引擎将所有组件绘制到屏幕上。这种方式保证了跨平台应用在 iOS 和 Android 上的表现完全一致。 1.1 结构概览 Flutter 的架构分为三层: 1. Framework(框架层): 这部分主要由 Dart 编写,提供了 Flutter 的各种 UI 组件(Widget)、手势检测、渲染层以及动画等。

By Lewis
Certbot Let's Encrypt 证书自动续期

Certbot Let's Encrypt 证书自动续期

安装 Certbot yum install epel-release -y yum install certbot -y certbot certonly //生成证书 certbot renew //续期 certbot certificates //查看证书 域名验证插件 https://github.com/ywdblog/certbot-letencrypt-wildcardcertificates-alydns-au 下载 $ git clone https://github.com/ywdblog/certbot-letencrypt-wildcardcertificates-alydns-au $ cd certbot-letencrypt-wildcardcertificates-alydns-au $ chmod 0777 au.sh 配置 DNS API 密钥: 这个 API 密钥什么意思呢?由于需要通过 API 操作阿里云 DNS,

By Lewis