3D轮播旋转视图

最新推荐文章于 2022-09-04 23:51:12 发布

AsBefore麦小兜

最新推荐文章于 2022-09-04 23:51:12 发布

阅读量1k

点赞数 2

分类专栏：前端相关文章标签： js 3d

本文链接：https://blog.csdn.net/qq_33878858/article/details/107360553

版权

成品

代码demo

<!DOCTYPE html>
<html ondragstart="return false"><!--不可拖拽-->
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="3D相册">
    <meta name="description" content="旋转相册">
    <title>旋转相册制作</title>
    <style>
* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  /* for touch screen */
  touch-action: none; 
}

body {
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #111;
  -webkit-perspective: 1000px;
          perspective: 1000px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

#drag-container, #spin-container {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: auto;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: rotateX(-10deg);
          transform: rotateX(-10deg);
}

#drag-container img, #drag-container video {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  line-height: 200px;
  font-size: 50px;
  text-align: center;
  -webkit-box-shadow: 0 0 8px #fff;
          box-shadow: 0 0 8px #fff;
  -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0005);
}

#drag-container img:hover, #drag-container video:hover {
  -webkit-box-shadow: 0 0 15px #fffd;
          box-shadow: 0 0 15px #fffd;
  -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0007);
}

#drag-container p {
  font-family: Serif;
  position: absolute;
  top: 100%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%) rotateX(90deg);
          transform: translate(-50%,-50%) rotateX(90deg);
  color: #fff;
}

#ground {
  width: 1400px;
  height: 900px;
  position: absolute;
  top: 100%;

最低0.47元/天解锁文章

AsBefore麦小兜

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
3D轮播旋转视图

成品代码demo<!DOCTYPE html><html ondragstart="return false"><head> <meta charset="UTF-8"> <meta name="keywords" content="3D相册"> <meta name="description" content="旋转相册"> <...
复制链接

扫一扫

专栏目录