css+div实现三维立方体悬浮旋转动画效果代码
代码语言:html
所属分类:动画
代码描述:css+div实现三维立方体悬浮旋转动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"); body { margin: 0; box-sizing: border-box; color: white; font-family: "Poppins", sans-serif; background-color: #000; height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 7vmin; --box-color: rgb(172 255 128 / 60%); } body h1 { position: absolute; font-size: 20vmin; text-align: center; transform: skew(10deg, 10deg); text-transform: uppercase; margin-top: -13vmin; line-height: 17vmin; } body .container { display: flex; justify-content: center; align-items: center; perspective: 1000px; gap: 7vmin; } body .container .shape { width: 20vmin; height: 20vmin; position: relative; transform-style: preserve-3d; transform: rotateX(-20deg) rotateY(-20deg); } body .container .shape:hover, body .container .shape:focus { animation: rotate 10s infinite linear; } body .container .shape:hover .face, body .container .shape:focus .face { background-color: var(--box-color); box-shadow: 0 0 16px var(--box-color); } body .container .shape:nth-child(1):hover .face, body .container .shape:nth-child(1):focus .face { --box-color: rgba(239, 154, 154, 0.8); } body .container .shape:nth-child(2):hover .face, body .container .shape:nth-child(2):focus .face { --box-color: rgb(255 0 0 / 80%); } body .container .shape:nth-child(3):hover .face, body .container .shape:nth-child(3):focus .face { --box-color: rgba(255, 160, 0, 0.8); } body .container .shape:nth-child(4):hover .face, body .container .shape:nth-child(4):focus .face { --box-color: rgba(63, 81, 181, 0.8); } body .container .face { position: absolute; width: 20vmin; height: 20vmin; background-color: var(--box-color); border: 1px solid #fff; box-sizing: border-box; opacity: 0.9; transition: all 0.5s ease-in-out; } body .container .front { transform: translateZ(10vmin); } body .container .back { transform: translateZ(-10vmin); } body .container .right { transform: rotateY(90deg) translateZ(10vmin); } body .contai.........完整代码请登录后点击上方下载按钮下载查看
网友评论0