CSS3实现的3D卡片旋转变形动画

通过CSS中CHILD属性和动画属性实现旋转动效

CSS3

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1691
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: #171723;
}
.canvas {
    position: relative;
    width: 500px;
    height: 500px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-perspective: 500px;
    perspective: 500px;
}
@-webkit-keyframes rotate-circle {
    0% {
        -webkit-transform: rotateY(-50deg) rotateX(-15deg) rotateZ(0deg) translateZ(40px);
        transform: rotateY(-50deg) rotateX(-15deg) rotateZ(0deg) translateZ(40px);
    }
    100% {
        -webkit-transform: rotateY(-50deg) rotateX(-15deg) rotateZ(-360deg) translateZ(40px);
        transform: rotateY(-50deg) rotateX(-15deg) rotateZ(-360deg) translateZ(40px);
    }
}
@keyframes rotate-circle {
    0% {
        -webkit-transform: rotateY(-50deg) rotateX(-15deg) rotateZ(0deg) translateZ(40px);
        transform: rotateY(-50deg) rotateX(-15deg) rotateZ(0deg) translateZ(40px);
    }
    100% {
        -webkit-transform: rotateY(-50deg) rotateX(-15deg) rotateZ(-360deg) translateZ(40px);
        transform: rotateY(-50deg) rotateX(-15deg) rotateZ(-360deg) translateZ(40px);
    }
}
.circle {
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-animation: rotate-circle 10s infinite linear;
    animation: rotate-circle 10s infinite linear;
}
@-webkit-keyframes square-shape {
    0%, 2.5%, 97.5%, 100% {
        border-radius: 0;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    }
    22.5%,
    27.5% {
        border-radius: 50%;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    }
    47.5%,
    52.5% {
        border-radius: 0;
        clip-path: polygon(50% 0, 50% 0, 100% 100%, 0% 100%);
        -webkit-clip-path: polygon(50% 0, 50% 0, 100% 100%, 0% 100%);
    }
}
@keyframes square-shape {
    0%, 2.5%, 97.5%, 100% {
        border-radius: 0;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    }
    22.5%,
    27.5% {
        border-radius: 50%;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    }
    47.5%,
    52.5% {
        border-radius: 0;
        clip-path: polygon(50% 0, 50% 0, 100% 100%, 0% 100%);
        -webkit-clip-path: polygon(50% 0, 50% 0, 100% 100%, 0% 100%);
    }
}
.square {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -60px;
    margin-left: -60px;
    width: 120px;
    height: 120px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 50% calc(50% + 150px);
    transform-origin: 50% calc(50% + 150px);
}
.square::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation: square-shape 10s infinite;
    animation: square-shape 10s infinite;
}
.square--aqua::before {
    background-color: aqua;
}
.square--gold::before {
    background-color: gold;
}
.square--tomato::before {
    background-color: tomato;
}
.square:nth-child(1) {
    -webkit-transform: translateY(-150px) rotate(0deg);
    transform: translateY(-150px) rotate(0deg);
}
.square:nth-child(1)::before {
    -webkit-animation-delay: 0.05s;
    animation-delay: 0.05s;
}
.square:nth-child(2) {
    -webkit-transform: translateY(-150px) rotate(13.33333deg);
    transform: translateY(-150px) rotate(13.33333deg);
}
.square:nth-child(2)::before {
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
}
.square:nth-child(3) {
    -webkit-transform: translateY(-150px) rotate(26.66667deg);
    transform: translateY(-150px) rotate(26.66667deg);
}
.square:nth-child(3)::before {
    -webkit-animation-delay: 0.15s;
    animation-delay: 0.15s;
}
.square:nth-child(4) {
    -webkit-transform: translateY(-150px) rotate(40deg);
    transform: translateY(-150px) rotate(40deg);
}
.square:nth-child(4)::before {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}
.square:nth-child(5) {
    -webkit-transform: translateY(-150px) rotate(53.33333deg);
    transform: translateY(-150px) rotate(53.33333deg);
}
.square:nth-child(5)::before {
    -webkit-animation-delay: 0.25s;
    animation-delay: 0.25s;
}
.square:nth-child(6) {
    -webkit-transform: translateY(-150px) rotate(66.66667deg);
    transform: translateY(-150px) rotate(66.66667deg);
}
.square:nth-child(6)::before {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
}
.square:nth-child(7) {
    -webkit-transform: translateY(-150px) rotate(80deg);
    transform: translateY(-150px) rotate(80deg);
}
.square:nth-child(7)::before {
    -webkit-animation-delay: 0.35s;
    animation-delay: 0.35s;
}
.square:nth-child(8) {
    -webkit-transform: translateY(-150px) rotate(93.33333deg);
    transform: translateY(-150px) rotate(93.33333deg);
}
.square:nth-child(8)::before {
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
}
.square:nth-child(9) {
    -webkit-transform: translateY(-150px) rotate(106.66667deg);
    transform: translateY(-150px) rotate(106.66667deg);
}
.square:nth-child(9)::before {
    -webkit-animation-delay: 0.45s;
    animation-delay: 0.45s;
}
.square:nth-child(10) {
    -webkit-transform: translateY(-150px) rotate(120deg);
    transform: translateY(-150px) rotate(120deg);
}
.square:nth-child(10)::before {
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}
.square:nth-child(11) {
    -webkit-transform: translateY(-150px) rotate(133.33333deg);
    transform: translateY(-150px) rotate(133.33333deg);
}
.square:nth-child(11)::before {
    -webkit-animation-delay: 0.55s;
    animation-delay: 0.55s;
}
.square:nth-child(12) {
    -webkit-transform: translateY(-150px) rotate(146.66667deg);
    transform: translateY(-150px) rotate(146.66667deg);
}
.square:nth-child(12)::before {
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}
.square:nth-child(13) {
    -webkit-transform: translateY(-150px) rotate(160deg);
    transform: translateY(-150px) rotate(160deg);
}
.square:nth-child(13)::before {
    -webkit-animation-delay: 0.65s;
    animation-delay: 0.65s;
}
.square:nth-child(14) {
    -webkit-transform: translateY(-150px) rotate(173.33333deg);
    transform: translateY(-150px) rotate(173.33333deg);
}
.square:nth-child(14)::before {
    -webkit-animation-delay: 0.7s;
    animation-delay: 0.7s;
}
.square:nth-child(15) {
    -webkit-transform: translateY(-150px) rotate(186.66667deg);
    transform: translateY(-150px) rotate(186.66667deg);
}
.square:nth-child(15)::before {
    -webkit-animation-delay: 0.75s;
    animation-delay: 0.75s;
}
.square:nth-child(16) {
    -webkit-transform: translateY(-150px) rotate(200deg);
    transform: translateY(-150px) rotate(200deg);
}
.square:nth-child(16)::before {
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s;
}
.square:nth-child(17) {
    -webkit-transform: translateY(-150px) rotate(213.33333deg);
    transform: translateY(-150px) rotate(213.33333deg);
}
.square:nth-child(17)::before {
    -webkit-animation-delay: 0.85s;
    animation-delay: 0.85s;
}
.square:nth-child(18) {
    -webkit-transform: translateY(-150px) rotate(226.66667deg);
    transform: translateY(-150px) rotate(226.66667deg);
}
.square:nth-child(18)::before {
    -webkit-animation-delay: 0.9s;
    animation-delay: 0.9s;
}
.square:nth-child(19) {
    -webkit-transform: translateY(-150px) rotate(240deg);
    transform: translateY(-150px) rotate(240deg);
}
.square:nth-child(19)::before {
    -webkit-animation-delay: 0.95s;
    animation-delay: 0.95s;
}
.square:nth-child(20) {
    -webkit-transform: translateY(-150px) rotate(253.33333deg);
    transform: translateY(-150px) rotate(253.33333deg);
}
.square:nth-child(20)::before {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
.square:nth-child(21) {
    -webkit-transform: translateY(-150px) rotate(266.66667deg);
    transform: translateY(-150px) rotate(266.66667deg);
}
.square:nth-child(21)::before {
    -webkit-animation-delay: 1.05s;
    animation-delay: 1.05s;
}
.square:nth-child(22) {
    -webkit-transform: translateY(-150px) rotate(280deg);
    transform: translateY(-150px) rotate(280deg);
}
.square:nth-child(22)::before {
    -webkit-animation-delay: 1.1s;
    animation-delay: 1.1s;
}
.square:nth-child(23) {
    -webkit-transform: translateY(-150px) rotate(293.33333deg);
    transform: translateY(-150px) rotate(293.33333deg);
}
.square:nth-child(23)::before {
    -webkit-animation-delay: 1.15s;
    animation-delay: 1.15s;
}
.square:nth-child(24) {
    -webkit-transform: translateY(-150px) rotate(306.66667deg);
    transform: translateY(-150px) rotate(306.66667deg);
}
.square:nth-child(24)::before {
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s;
}
.square:nth-child(25) {
    -webkit-transform: translateY(-150px) rotate(320deg);
    transform: translateY(-150px) rotate(320deg);
}
.square:nth-child(25)::before {
    -webkit-animation-delay: 1.25s;
    animation-delay: 1.25s;
}
.square:nth-child(26) {
    -webkit-transform: translateY(-150px) rotate(333.33333deg);
    transform: translateY(-150px) rotate(333.33333deg);
}
.square:nth-child(26)::before {
    -webkit-animation-delay: 1.3s;
    animation-delay: 1.3s;
}
.square:nth-child(27) {
    -webkit-transform: translateY(-150px) rotate(346.66667deg);
    transform: translateY(-150px) rotate(346.66667deg);
}
.square:nth-child(27)::before {
    -webkit-animation-delay: 1.35s;
    animation-delay: 1.35s;
}

HTML

通过CSS中CHILD属性和动画属性实现旋转动效

CSS3

编辑器支持Emmet

快捷键

通过CSS中CHILD属性和动画属性实现旋转动效

CSS3

使用CSS3 perspective变换实现的电影卡片悬停3D偏转动效

使用CSS3旋转变换和混合模式实现的动画图标

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：