HTML5+CSS3从入门到精通之CSS3实现3D切割轮播图-职坐标

HTML5+CSS3从入门到精通之CSS3实现3D切割轮播图

沉沙 2019-03-08 来源：阅读 1825 评论 0

摘要：本篇文章探讨了HTML5+CSS3从入门到精通之CSS3实现3D切割轮播图，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。

本篇文章探讨了HTML5+CSS3从入门到精通之CSS3实现3D切割轮播图，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。

HTML5+CSS3从入门到精通之CSS3实现3D切割轮播图

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>CSS3 3D切割轮播图</title>
 <style>
 body {
 margin: 0;
 padding: 0;
 }
 ul {
 margin: 0;
 padding: 0;
 list-style: none;
 height: 100%;
 width: 100%;
 }
 .view {
 width: 560px;
 height: 300px;
 border: 1px solid #ccc;
 margin: 100px auto;
 position: relative;
 }
 /*大盒子*/
 .view ul {
 width: 560px;
 height: 300px;
 /*3d呈现*/
 /*transform-style: preserve-3d;*/
 }
 .view ul li {
 width: 112px;
 height: 300px;
 float: left;
 position: relative;
 /*3d呈现*/
 transform-style: preserve-3d;
 }
 .view ul li span {
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 }
 .view ul li span:nth-child(1) {
 background-image: url("images/1.jpg");
 background-repeat: no-repeat;
 transform:translateZ(150px);
 }
 .view ul li span:nth-child(2) {
 background-image: url("images/2.jpg");
 background-repeat: no-repeat;
 transform: translateY(-150px) rotateX(90deg);
 }
 .view ul li span:nth-child(3) {
 background-image: url("images/3.jpg");
 background-repeat: no-repeat;
 transform: translateZ(-150px) rotateX(180deg);
 }
 .view ul li span:nth-child(4) {
 background-image: url("images/4.jpg");
 background-repeat: no-repeat;
 transform: translateY(150px) rotateX(270deg);
 }
 .view ul li:nth-child(2) span {
 background-position: -112px;
 }
 .view ul li:nth-child(3) span {
 background-position: -224px;
 }
 .view ul li:nth-child(4) span {
 background-position: -336px;
 }
 .view ul li:nth-child(5) span {
 background-position: -448px;
 }
 /*3d转换旋转*/
 .view ul li {
 transition: all 1s;
 /*transform: translateZ(150px);*/
 /*transform-origin: center center -150px;*/
 }
 /*按钮*/
 .prev, .next {
 display: block;
 width: 60px;
 height: 60px;
 text-align: center;
 line-height: 60px;
 margin-top: -30px;
 font-size: 40px;
 color: #FFF;
 text-decoration: none;
 background-color: rgba(0, 0, 0, 0.5);
 position: absolute;
 top: 50%;
 }
 .next {
 right: 0;
 }
 </style>
</head>
<body>
<div>
 <ul>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 </ul>
 <a href="javascript:;"><</a>
 <a href="javascript:;">></a>
</div>
<script src="js/jquery.min.js"></script>
<script>
 $(function () {
 var count = 0;
 $('.prev').on('click', function () {
 count ++;
 $('li').css('transform','rotateX('+count*90+'deg)').each(function(index){
 $(this).css('transition-delay',index*0.25+'s');
 });
 })
 $('.next').on('click', function () {
 count -- ;
 $('li').css('transform','rotateX('+count*90+'deg)').each(function(index){
 $(this).css('transition-delay',index*0.25+'s');
 });
 })
 });
</script>
</body>
</html>