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; } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0