css实现3d三维立体盒子悬浮倾斜动画效果代码
代码语言:html
所属分类:悬停
代码描述:css实现3d三维立体盒子悬浮倾斜动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style>* { margin: 0; padding: 0; box-sizing: border-box; } html { height: 600px; min-height: 150%; } body { min-height: 100%; background: linear-gradient( hsl(80,51%,8%), #E0D7A3); } div { perspective: 1000px; width: 33%; margin: 0 auto; margin-top: 3rem; } figure { margin: 0; width: 100%; height: 29.5vw; background: url("//repo.bfw.wiki/bfwrepo/image/5fbedf8f5349c.png"); background-size: 100%; transform-origin: center bottom; transform-style: preserve-3d; transition: 1s transform; } figure figcaption { width: 100%; background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("winter-hat.jpg"); background-size: 100%; height: 50px; background-repeat: no-repeat; background-position: bottom; color: #fff; position: relative; top: 29.5vw; transform-origin: center top; transform: rotateX(-89.9deg); font-size: 1.2vw; font-family: Montserrat, Arial, sans-serif; text-align: center; line-height: 3; } fig.........完整代码请登录后点击上方下载按钮下载查看
网友评论0