妙味课堂_前端3D轮播教程
在妙味课堂学习了3D轮播之后,感觉自己茅塞顿开,所以这里出一个教程《妙味课堂_前端3D轮播教程》,来系统的讲解一下3D轮播的做法。
妙味课堂_前端3D轮播教程讲解
在前端,轮播都是必不可少的,那么我们如何将轮播做的好看呢,现在更新了CSS3之后,前端已经可以去制作一些3D效果了,妙味课堂_前端3D轮播教程,也就可以做轮播了,接下来我们来来有哪些地方需要注意的吧!
妙味课堂_前端3D轮播教程源码如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129
| <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>妙味课堂_前端3D轮播教程_源码下载</title>
<style>
* {
margin: 0;
padding: 0
}
body {
perspective: 700px;
}
ul {
list-style: none;
}
ul {
width: 200px;
height: 200px;
margin: 100px auto;
position: relative;
transition: all 2s;
transform-style: preserve-3d;
transform: scaleX(2.5) scaleY(1.5) rotateX(0deg);
}
/* ul:hover {
transform:scaleX(2.5) scaleY(1.5) rotateX(360deg);
}*/
ul li {
width: 100%;
height: 100%;
text-align: center;
line-height: 200px;
color: white;
font-size: 40px;
position: absolute;
-webkit-background-size: cover;
}
ul li:nth-child(1) {
transform: rotateX(0deg) translateZ(100px);
background: url(https://www.huanggr.cn/wp-content/uploads/2018/08/u15720805482276536717fm26gp0-220x150.jpg) no-repeat;
background-size: cover;
}
ul li:nth-child(2) {
background: url(https://www.huanggr.cn/wp-content/uploads/2018/08/u15720805482276536717fm26gp0-220x150.jpg) no-repeat;
transform: rotateX(-90deg) translateZ(100px);
background-size: cover;
}
ul li:nth-child(3) {
background: url(https://www.huanggr.cn/wp-content/uploads/2018/08/u15720805482276536717fm26gp0-220x150.jpg) no-repeat;
transform: rotateX(-180deg) translateZ(100px);
background-size: cover;
}
ul li:nth-child(4) {
background: url(https://www.huanggr.cn/wp-content/uploads/2018/08/u15720805482276536717fm26gp0-220x150.jpg) no-repeat;
transform: rotateX(-270deg) translateZ(100px);
background-size: cover;
}
ul li:nth-child(5) {
background: rgba(255, 0, 255, .6);
transform: rotateY(-90deg) translateZ(100px);
}
ul li:nth-child(6) {
background: rgba(23, 0, 45, .6);
transform: rotateY(90deg) translateZ(100px);
}
span {
position: absolute;
width: 50px;
height: 50px;
border-top: 3px solid #000;
border-right: 3px solid #000;
transform: rotate(45deg);
top: 200px;
left: 50%;
margin-left: 100px;
}
.prev {
transform: rotate(-135deg);
margin-left: -200px;
}
</style>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
//妙味课堂_前端3D轮播教程
$(function () {
var num = 0;
$(".next").on("click", function () {
num++;
$("ul").css("transform", "scaleX(2.5) scaleY(1.5) rotateX(" + num * 90 + "deg)")
})
$(".prev").on("click", function () {
num--;
$("ul").css("transform", "scaleX(2.5) scaleY(1.5) rotateX(" + num * 90 + "deg)")
})
})
//妙味课堂_前端3D轮播教程
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<span class="next"></span><span class="prev"></span>
</body>
</html> |
这里我们会发现,我们使用的是css的transform和scaleX制作的效果,国瑞前端博主希望大家可以掌握!
「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」
共 0 条评论关于"妙味课堂_前端3D轮播教程_源码下载"
最新评论