3D 视频立方体旋转效果
代码语言:html
所属分类:三维
代码描述:3D 视频立方体旋转效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> /* CSS reset ==============================================*/ *, *::after, *::before { box-sizing: inherit; margin: 0; padding: 0; } body { box-sizing: border-box; position: relative; } html { /* formula: 1 rem = 10px; 10px/16px = 62.5% */ font-size: 62.5%; } /* Typography ================================================*/ * { color: #eee; font-family: "Open Sans", sans-serif; } /* Signup heading */ .main-heading { font-size: 3.5rem; padding-bottom: 2rem; width: 100rem; } /* Signup text */ .body-text { color: #eee; font-family: "Open Sans", sans-serif; font-size: 1.4rem; font-weight: 300; line-height: 2rem; padding-bottom: 3rem; } /* Components ================================================*/ /* Signup button */ .signup-button { background-color: transparent; border: 2px solid #eee; border-radius: 0.5rem; color: #eee; font-size: 1.5rem; overflow: hidden; padding: 1rem 2rem; position: relative; transition: all 0.2s ease-in-out; z-index: 10; } .signup-button:hover { color: #272829; } .signup-button::before { background-color: #eee; content: ""; height: 100%; left: 0; position: absolute; top: 0; transform: scaleX(0); transition: all 0.2s ease-in-out; width: 100%; z-index: -1; } .signup-button:hover::before { transform: scaleX(1); } /* Layout ================================================*/ .main { align-items: center; background: linear-gradient(to right bottom, #272829, #37383b, #272829); display: flex; flex-direction: row; height: 100vh; position: relative; width: 100%; } /* Signup section (on left side) */ .signup-section { align-items: center; display: flex; flex-direction: column; height: 100%; margin-left: 4rem; justify-content: center; width: 45%; } /* Container for heading, text, and button */ .signup-box { width: 100%; height: 55%; } /* Showbox cube section (on right side) */ .cube__section { align-items: center; display: flex; height: 100vh; justify-content: center; width: 60%; } /* The cube - where the fun begins :) ===========================*/ /* The cube outer container */ .cube { height: 20rem; perspective: 60rem; width: 20rem; } /* The cube's inner container */ /* Note: rotationBox keyframes is placed right at the end */ .cube__container { animation: rotationBox 20s linear infinite forwards; height: 100%; position: relative; transform: translateZ(-10rem); transform-style: preserve-3d; width: 100%; } /* This will target every single side of the cubez */ .cube__face { align-items: center; background-color: #eee; display: flex; height: 20rem; justify-content: center; overflow: hidden; position: absolute; width: 20rem; } /* This will target an individual side of the cube */ .cube__face--front { transform: rotateY(0deg) translateZ(10rem); } .cube__face--back { transform: rotateY(180deg) translateZ(10rem); } .cube__face--left { transform: rotateY(-90deg) translateZ(10rem); } .cube__face--right { transform: rotateY(90deg) translateZ(10rem); } .cube__face--top { transform: rotateX(90deg) translateZ(10rem); } .cube__face--bottom { transform: rotateX(-90deg) translateZ(10rem); } /* Videos ==============================================================*/ /* Specifically targeting the <video> element */ .video__container { height: auto; min-height: 100%; object-fit: cover; width: 100%; } /* Responsive ============================================================*/ /* Tablet */ @media only screen and (max-width: 48em) { /* CSS Reset */ html { font-size: 56.25%; } /* Typography */ /* Signup heading */ .main-heading { width: 100%; } /* Layout */ .main { flex-direction: column-reverse; height: 100%; } /* Signup section (on left side) */ .signup-section { height: 100%; margin-left: 0; width: 100%; } /* Container for heading, text, and button */ .signup-box { height: 100%; padding: 3rem 2rem; text-align: center; } /* Showbox cube secti.........完整代码请登录后点击上方下载按钮下载查看
网友评论0