Day05（demo 3d旋转 3d立方体 立体轮播）
程序员文章站
2022-03-26 13:37:48
...
demo 3d旋转
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
margin: 0;
padding: 0;
background: #b3c04c;
}
.wa{
width: 300px;
height: 300px;
margin: 50px auto;
position: relative;
}
.wa::before,.wa::after{
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 150px;
transition: all 0.6s;
backface-visibility: hidden;/*背面隐藏*/
}
.wa::before{
background: url(bg.png) left top;
transform: rotateY(0deg);
}
.wa::after{
background: url(bg.png) right top;
transform: rotateY(180deg);
}
.wa:hover::before{
transform: rotateY(180deg);
}
.wa:hover::after{
transform: rotateY(0deg);
}
</style>
</head>
<body>
<div class="wa">
</div>
</body>
</html>
demo 3d立方体
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
ul{list-style: none;}
ul{
width: 200px;
height: 200px;
margin: 100px auto;
position: relative;
transition: all 3s;
transform-style: preserve-3d;
}
ul li{
width: 100%;
height: 100%;
text-align: center;
line-height: 200px;
color: #fff;
font-size: 40px;
position: absolute;
}
ul li:nth-child(1){
transform: rotateX(0deg) translateZ(100px);
background: rgba(200,0,0,0.6);
}
ul li:nth-child(2){
transform: rotateX(-90deg) translateZ(100px);
background: rgba(0,255,0,0.6);
}
ul li:nth-child(3){
transform: rotateX(-180deg) translateZ(100px);
background: rgba(0,0,255,0.6);
}
ul li:nth-child(4){
transform: rotateX(-270deg) translateZ(100px);
background: rgba(0,255,255,0.6);
}
ul li:nth-child(5){
transform: rotateY(-90deg) translateZ(100px);
background: rgba(255,0,255,0.6);
}
ul li:nth-child(6){
transform: rotateY(90deg) translateZ(100px);
background: rgba(23,0,45,0.6);
}
ul:hover{
transform: rotateX(360deg) rotateY(90deg);
}
</style>
</head>
<body>
<ul>
<li>第一面</li>
<li>第二面</li>
<li>第三面</li>
<li>第四面</li>
<li>第五面</li>
<li>第六面</li>
</ul>
</body>
<script type="text/javascript">
$(".b").mouseenter()
</script>
</html>
demo 立体轮播
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
*{margin: 0;padding: 0;}
ul{list-style: none;}
body{margin: 0;padding-top: 0;background: #F7F7F7;}
.cut{
height: 300px;
width: 560px;
margin: 100px auto;
background: cyan;
position: relative;
}
.prev,.next{
display: block;
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
margin-top: -30px;
font-size: 40px;
text-decoration: none;
background: rgba(0,0,0,0.5);
position: absolute;
top: 50%;
color: #fff;
}
.next{
right: 0;
}
.cut li{
position: absolute;
top: 0;
width: 112px;
height: 100%;
transform-style: preserve-3d;
transition: all 1s;
}
.cut li div{
width: 100%;
height: 100%;
position: absolute;
}
.cut li div:nth-of-type(1){
background: url(images/1.png) no-repeat;
transform: rotateX(0deg) translateZ(150px);
}
.cut li div:nth-of-type(2){
background: url(images/2.png) no-repeat;
transform: rotateX(-90deg) translateZ(150px);
}
.cut li div:nth-of-type(3){
background: url(images/3.png) no-repeat;
transform: rotateX(-180deg) translateZ(150px);
}
.cut li div:nth-of-type(4){
background: url(images/4.png) no-repeat;
transform: rotateX(-270deg) translateZ(150px);
}
</style>
<script type="text/javascript" src="jquery-3.2.1.min.js" ></script>
<script type="text/javascript">
$(function(){
$('li').each(function(index,ele){
$(this).css({'left':560/5*index,"transition-delay":''+index*0.2+'s'});
$(this).find('div').css({backgroundPosition:-560/5*index+"px 0"})
})
var num = 0;
$('.next').on('click',function(){
num++;
$('li').css('transform','rotateX('+num*90+'deg)');
});
$('.prev').on('click',function(){
num--;
$('li').css('transform','rotateX('+num*90+'deg)');
});
});
</script>
</head>
<body>
<div class="cut">
<ul>
<li>
<div></div>
<div></div>
<div></div>
<div></div>
</li>
<li>
<div></div>
<div></div>
<div></div>
<div></div>
</li>
<li>
<div></div>
<div></div>
<div></div>
<div></div>
</li>
<li>
<div></div>
<div></div>
<div></div>
<div></div>
</li>
<li>
<div></div>
<div></div>
<div></div>
<div></div>
</li>
</ul>
<a href="javascript::" class="prev"><</a>
<a href="javascript::" class="next">></a>
</div>
</body>
</html>