用Canvas画布展示出3D效果的网页源码

mazai5080

已于 2022-04-15 20:33:54 修改

阅读量1.6k

点赞数

分类专栏：前端源码文章标签： css3 javascript 经验分享

于 2022-04-14 00:54:34 首次发布

本文链接：https://blog.csdn.net/mazai5080/article/details/124161915

版权

前端源码专栏收录该内容

102 篇文章 25 订阅

订阅专栏

大家好，今天给大家介绍一款，用Canvas画布展示出3D效果的网页源码（图1）。送给大家哦，获取方式在本文末尾。

图1

每次点击页面中间的卡片，就会触发3d旋转特效（图2）

图2

源码预览，

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css 3d 旋转</title>
<script src="static/js/jquery-1.10.2.js"></script>
<style>


body {
  background: linear-gradient(to right, #141e30, #243b55);
}

h1, h2, h3, h4, p {
  color: #FFFFFF;
  font-family: Arial, sans-serif;
}

// HEADER
.header {
  text-align: center;
  span {
    padding-right: 5px;
  }
}

// CARD
.cards-wrapper {
  margin-top: 50px;
}
.card-container {
  perspective: 1200px;
}
.card {
  margin: 0 auto;
  height: 500px;
  width: 500px;
  max-width: 80%;
  position: relative;
  border-radius: 25px;
  transition: all 1s ease;
  transform-style: preserve-3d;
  box-shadow: 1px 3px 3px rgba(0,0,0,0.2)
}


</body>
</html>