三维盒子图片悬浮拆分立体效果
代码语言:html
所属分类:三维
代码描述:三维盒子图片悬浮拆分立体效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; } .parentBox { display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; background-color: #000000; perspective:500px; /* background-color: #fff; */ } .box { transform-style:preserve-3d; width: 300px; height: 300px; position: relative; /* background-color: pink; */ animation: run 10s infinite; z-index: 999; } .box1 { position: absolute; top: 50%; left: 50%; width: 280px; height: 280px; /* background-color: pink; */ transform: translate(-50%, -50%); transform-style:preserve-3d; /* animation: run 10s infinite; */ } @keyframes run { 0% { transform:rotateY(0); } 20% { transform:rotateY(45deg); } 40% { transform:rotateZ(90deg); } 60% { transform:rotateX(135deg); } 80% { transform:rotateZ(180deg); } 90% { transform:rotateX(225deg); } 100% { transform:rotateX(360deg); } } a { position: absolute; display: inline-block; width: 300px; height: 300px; transform-style:preserve-3d; } img { width: 100%; height: 100%; } .box1 a { position: absolute; display: inline-block; width: 280px; height: 280px; transform-style:preserve-3d; } .top { background-color: red; transform: translateY(-150px) rotateX(90deg); } .bottom { background-color: blue; transform: translateY(150px) rotateX(90deg); } .right { background-color: green; transform: translateX(150px) rotateY(90deg); } .left { background-color: yellow; transform: translateX(-150px) rotateY(90deg); } .before { background-color: rgb(225, 0, 255); transform: translateZ(150px); } .after { background-color: rgb(0, 225, 255); transform: translateZ(-150px); } .box:hover .top { transform: translateY(-230px) rotateX(90deg); transition: 0.5s; } .box:hover .bottom { transform: translateY(230px) rotateX(90deg); transition: 0.5s; } .box:hover .right { transform: translateX(230px) rotateY(90deg); transition: 0.5s; } .box:hover .left { transform: translateX(-230px) rotateY(90deg); transition: 0.5s; } .box:hover .before { transform: translateZ(230px); transition: 0.5s; } .box:hover .after { transform: translateZ(-230px); transition: 0.5s; } .box1 .top1 { background-color: rgba(255, 255, 255, .5); transform: translateY(-140px) rotateX(90deg); } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0