3d图片旋转屋效果
代码语言:html
所属分类:三维
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> CSS 3D Carousel Room</title> <style> body, html { width: 100%; height: 100%; padding: 0; margin: 0; background: #2e2d31; overflow: hidden; } .wrapper { position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .wrapper-3d { position: relative; perspective: 250px; transform-style: preserve-3d; } .image { height: 175px; width: 300px; } .carousel-wrapper { overflow: hidden; width: 60vw; height: 80vh; } .carousel-container { display: flex; flex-direction: row; width: 100%; height: 100%; transition: all 0.5s ease-out; } .slide { flex-shrink: 0; width: 100%; height: 100%; } /* The trick is to position them on their respective side Then set transform-origin to that siede And put desired angle */ .left-3d { position: absolute; transform-origin: right center; transform: rotateY(100deg); top: 0; bottom: 0; right: calc(100%); } #left { transform: translateX(0%); } #center { transform: translateX(-100%); } .right-3d { position: absolute; transform-origin: left center; transform: rotateY(-100deg); top: 0; bottom: 0; left: calc(100%); } #right { transform: translateX(-200%); } .first, .second, .third { background-size: cover; } .first { background-image: url("http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg"); } .second { background-image: url("http://repo.bfw.wiki/bfwrepo/image/slicebox/3.jpg"); background-position-y: 50%; } .third { background-image: url("http://repo.bfw.wiki/bfwrepo/image/slicebox/2.jpg"); background-position-y: 50%; } .debug { position: absolute; text-align: center; width: 100%; font-size: 1.10em; font-family: sans-serif; letter-spacing: 0.1em; font-weight: 200; margin: 0; margin-top: 10px; color: #fafafaee; } .debug-top { top: 2vh; } .debug-bot { bottom: 2vh; } .fa { font-size: 15rem; color: #fafafa99; line-height: 20px; } @media only screen and (min-width: 1600px) { .right-3d { transform: none; transform: rotateY(-120deg); } .left-3d { transform: none; transform: rotateY(120deg); } } </style> </head> <body translate="no".........完整代码请登录后点击上方下载按钮下载查看
网友评论0