css实现扭转的方块动画效果
代码语言：html
所属分类：动画
代码描述：css实现扭转的方块动画效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background: #f7f7fd;
}
*,
*::after,
*::before {
box-sizing: border-box;
transform-style: preserve-3d;
}
:root {
--grey-color-1: #bdc3c7;
--grey-color-2: #95a5a6;
--grey-color-3: #7f8c8d;
}
.cube {
--cube-width: 12rem;
--cube-height: 12rem;
--cube-depth: 0.5rem;
width: 12rem;
height: 0.5rem;
transform-origin: center center 6rem;
animation: spin 3s ease-in-out alternate infinite;
}
.cube__front {
width: var(--cube-width);
height: var(--cube-height);
transform-origin: bottom left;
transform: rotateX(-90deg) translateZ(calc(calc(var(--cube-depth) * 2) - var(--cube-height)));
}
.cube__back {
width: var(--cube-width);
height: var(--cube-height);
transform-origin: top left;
transform: rotateX(-90deg) rotateY(180deg) translateX(calc(var(--cube-width) * -1)) translateY(calc(var(--cube-height) * -1));
}
.cube__right {
width: calc(var(--cube-depth) * 2);
height: var(--cube-height);
transform-origin: top left;
transform: rotateY(90deg) rotateZ(-90deg) translateZ(var(--cube-width)) translateX(calc(var(--cube-depth) * -2)) translateY(calc(var(--cube-height) * -1));
}
.cube__left {
width: calc(var(--cube-depth) * 2);
height: var(--cube-height);
transform-origin: top left;
transform: rotateY(-90deg) rotateZ(90deg) translateY(calc(var(--cube-height) * -1));
}
.cube__top {
width: var(--cube-width);
height: calc(var(--cube-depth) * 2);
transform-origin: top left;
transform: translateZ(var(--cube-height));
}
.cube__bottom {
width: var(--cube-width);
height: calc(var(--cube-depth) * 2);
transform-origin: top left;
transform: rotateY(180deg) translateX(calc(var(--cube-width) * -1));
}
.cube .face {
position: absolute;
}
.cube__front {
background-color: var(--grey-color-1);
}
.cube__back {
background-color: var(--grey-color-3);
}
.cube__right {
background-color: var(--grey-color-1);
}
.cube__left {
background-color: var(--grey-color-2);
}
.cube__top {
background-color: var(--grey-color-3);
}
.cube__bottom {
background-color: var(--grey-color-2);
}
.spiral-tower {
display: grid;
grid-auto-flow: row;
transform: rotateX(-30deg) rotateY(45deg);
}
.spiral-tower .cube:nth-child(1) {
animation-delay: 0s;
}
.spiral-tower .cube:nth-child(2) {
animation-delay: 0.015s;
}
.spiral-tower .cube:nth-child(3) {
animation-delay: 0.03s;
}
.spiral-tower .cube:nth-child(4) {
animation-delay: 0.045s;
}
.spiral-tower .cube:nth-child(5) {
animation-delay: 0.06s;
}
.spiral-tower .cube:nth-child(6) {
animation-delay: 0.075s;
}
.spiral-tower .cube:nth-child(7) {
animation-delay: 0.09s;
}
.spiral-tower .cube:nth-child(8) {
animation-delay: 0.105s;
}
.spiral-tower .cube:nth-child(9) {
animation-delay: 0.12s;
}
.spiral-tower .cube:nth-child(10) {
animation-delay: 0.135s;
}
.spiral-tower .cube:nth-child(11) {
animation-delay: 0.15s;
}
.spiral-tower .cube:nth-child(12) {
animation-delay: 0.165s;
}
.spiral-tower .cube:nth-child(13) {
animation-delay: 0.18s;
}
.spiral-tower .cube:nth-child(14) {
animation-delay: 0.195s;
}
.spiral-tower .cube:nth-child(15) {
animation-delay: 0.21s;
}
.spiral-tower .cube:nth-child(16) {
animation-delay: 0.225s;
}
.spiral-tower .cube:nth-child(17) {
animation-delay: 0.24s;
}
.spiral-tower .cube:nth-child(18) {
animation-delay: 0.255s;
}
.spiral-tower .cube:nth-child(19) {
animation-delay: 0.27s;
}
.spiral-tower .cube:nth-child(20) {
animation-delay: 0.285s;
}
.spiral-tower .cube:nth-child(21) {
animation-delay: 0.3s;
}
.spiral-tower .cube:nth-child(22) {
animation-delay: 0.315s;
}
.spiral-tower .cube:nth-child(23) {
animation-delay: 0.33s;
}
.spiral-tower .cube:nth-child(24) {
animation-delay: 0.345s;
}
.spiral-tower .cube:nth-child(25) {
animation-delay: 0.36s;
}
.spiral-tower .cube:nth-child(26) {
animation-delay: 0.375s;
}
.spiral-tower .cube:nth-child(27) {
animation-delay: 0.39s;
}
.spiral-tower .cube:nth-child(28) {
animation-delay: 0.405s;
}
.spiral-tower .cube:nth-child(29) {
animation-delay: 0.42s;
}
.spiral-tower .cube:nth-child(30) {
animation-delay: 0.435s;
}
.spiral-tower .cube:nth-child(31) {
animation-delay: 0.45s;
}
.spiral-tower .cube:nth-child(32) {
animation-delay: 0.465s;
}
.spiral-tower .cube:nth-child(33) {
animation-delay: 0.48s;
}
.spiral-tower .cube:nth-child(34) {
animation-delay: 0.495s;
}
.spiral-tower .cube:nth-child(35) {
animation-delay: 0.51s;
}
.spiral-tower .cube:nth-child(36) {
animation-delay: 0.525s;
}
.spiral-tower .cube:nth-child(37) {
animation-delay: 0.54s;
}
.spiral-tower .cube:nth-child(38) {
animation-delay: 0.555s;
}
.spiral-tower .cube:nth-child(39) {
animation-delay: 0.57s;
}
.spiral-tower .cube:nth-child(40) {
animation-delay: 0.585s;
}
.spiral-tower .cube:nth-child(41) {
animation-delay: 0.6s;
}
.spiral-tower .cube:nth-child(42) {
animation-delay: 0.615s;
}
.spiral-tower .cube:nth-child(43) {
animation-delay: 0.63s;
}
.spiral-tower .cube:nth-child(44) {
animation-delay: 0.645s;
}
.spiral-tower .cube:nth-child(45) {
animation-delay: 0.66s;
}
.spiral-tower .cube:nth-child(46) {
animation-delay: 0.675s;
}
.spiral-tower .cube:nth-child(47) {
animation-delay: 0.69s;
}
.spiral-tower .cube:nth-child(48) {
animation-delay: 0.705s;
}
@keyframes spin {
0%,
15% {
transform: rotateY(0);
}
85%,
100% {
transform: rotateY(1turn);
}
}
</style>
</head>
<body translate="no" >
<div class="spiral-tower">
<div class="cube">
<div class="face cube__front"></div>
<div class="face cube__back"></div>
<div class="face cube__right"></div>
<div class="face cube__left"></div>
<div class="face cube__top"></div>
<div class="face cube__bottom"></div>
</div>
<div class="cube">
<div class="face cube__front"></div>
<div class="face cube__back"></div>
<div class="face cube__right"></div>
<div class="face cube__left"></div>
<div class="face cube__top"></div>
<div class="face cube__bottom"></div>
</div>
<div class="cube">
<div class="face cube__front"></div>
<div class="face cube__back"></div>
<div class="face cube__right"></div>
<div class="face cube__left"></div>
<div class="face cube__top"></div>
<div class="face cube__bottom"></div>
</div>
<div class="cube">
<div class="face cube__front"></div>
<div class="face cube__back"></div>
<div class="face cube__right"></div>
<div class="face cube__left"></div>
<div class="face cube__top"></div>
<div class="face cube__bottom"></div>
</div>
<div class="cube">
<div class="face cube__front"></div>
<div class="face cube__back"></div>
<div class="face cube__right"></div>
<div class="face cube__left"></div>
<div class="face cube__top"></div>
<div class="face cube__bottom"></div>
</div>
<div class="cube">
<div class="face cube__front"></div>
<div class="face cube__back"></div>
<div class="face cube__right"></div>
<div class="face cube__left"></div>
<div class="face cube__top"></div>
<div class="face cube__bottom"></div>
</div>
<div class="cube">
<div class="face cube__front"></div>
<div class="face cube__back"></div>
<div class="face cube__right"></div>
<div class="face cube__left"></div>
<div class="face cube__top"></div>
<div class="face cube__bottom"></div>
</div>
<div class="cube">
<div class="face cube__front"></div>
<div class="face cube__back"></div>
<div class="face cube__right"></div>
<div class="face cube__left"></div>
<div class="face cube__top"></div>
<div class="face cube__bottom"></div>
</div>
<div class="cube">
<div class="face cube__front"></div>
<div class="face cube__back"></div>
<div class="face cube__right"></div>
<div class="face cube__left"></div>
<div class="face cube__top"></div>
<div class="face cube__bottom"></div>
</div>
<div class="cube">
<div class="face cube__front"></div>
<div class="face cube__back"></div>
<div class="face cube__right"></div>
<div class="face cube__left"></div>
<div class="face cube__top"></div>
<div class="face cube__bottom"></div>
</div>
<div class="cube">
<div class="face cube__front"></div>
<div class="face cube__back"></div>
<div class="face cube__right"></div>
<div class="face cube__left"></div>
<div class="face cube__top"></div>
<div class="face cube__bottom"></div>
</div>
<div class="cube">
<div class="face cube__front"></div>
<div class="face cube__back"></div>
<div class="face cube__right"></div>
<div class="face cube__left"></div>
<div class="face cube__top"></div>
<div class="face cube__bottom"></div>
</div>
<div class="cube">
<div class="face cube__front"></div>
<div class="face cube__back"></div>
<div class="face cube__right"></div>
<div class="face cube__left"></div>
<div class="face cube__top"></div>
<div class="face cube__bottom"></div>
</div>
<div class="cube">
<div class="face cube__front"></div>
<div class="face cube__back"></div>
<div class="face cube__right"></div>
<div class="face cube__left"></div>
<div class="face cube__top"></div>
<div class="face cube__bottom"></div>
</div>
<div class="cube">
<div class="face cube__front"></div>
<div class="face cube__back"></div>
<div class="face cube__right"></div>
<div class="face cube__left"></div>
<div class="face cube__top"></div>
<div class="face cube__bottom"></div>
</div>
<div class="cube">
<div class="face cube__front"></div>
<div class="face cube__back"></div>
<div class="face cube__right"></div>
<div class="face cube__left"></div>
<div class="face cube__top"></div>
<div class="face cube__bottom"></div>
</div>
<div class="cube">
<div class="face cube__front"></div>
<div class="face cube__back"></div>
<div class="face cube__right"></div>
<div class="face cube__left"></div>
<div class="face cube__top"></div>
<div class="face cube__bottom"></div>
</div>
<div class="cube">
<div class="face cube__front">&l.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0