文章目录
一.CSS3实现旋转正方体
效果图
<!DOCTYPE html>
<!-- 正方体旋转 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>正方体旋转</title>
<style>
*{
margin: 0;padding: 0;}
.box{
width: 300px;height: 300px;margin: 30px auto;border: 1px solid black;perspective: 200px;perspective-origin:top;}/*perpspective设置景深,perspective-orign设置观察的基点*/
.box ul{
list-style: none;width: 100px;height: 100px;margin: 100px;position: relative;transition: 2s;transform-style:preserve-3d;transform-origin: center center -50px;}/*transform-style: preserve-3d显示3d效果 perspective设置景深也是必不可少 transform-origin设置旋转的基点*/
.box ul li{
width: 100px;height: 100px;position: absolute;font-size: 30px;text-align: center;line-height: 100px;opacity: 0.3;/*backface-visibility: hidden;*/}
.box ul li:nth-of-type(1){
background: red;left: 0;top: 0;}
.box ul li:nth-of-type(2){
background: blue;left: 100px;top: 0;transform-origin: left;transform: rotateY(90deg);}/*2号以左边为基点,向右旋转90度(正)*/
.box ul li:nth-of-type(3){
background: green;left: -100px;top: 0;transform-origin: right;transform: rotateY(-90deg);}/*2号以右边为基点,向左旋转90度(负)*/
.box ul li:nth-of-type(4){
background: yellow;left: 0;top: 100px;transform-origin: top;transform: rotateX(-90deg);}
.box ul li:nth-of-type(5){
background: pink;left: 0;top: -100px;transform-origin: bottom;transform: rotateX(90deg);}
.box ul li:nth-of-type(6){
background: purple;left: 0;top: 0;transform: translateZ(-100px) rotateY(180deg);}
.box:hover ul{
animation:rotation 2s infinite linear ;/*移入边框内 显示动画*/
}
@keyframes rotation{
0%{
transform: rotateY(0);
}
100%{
transform: rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</l i>
</ul>
</div>
</body>
</html>
二.旋转木马
效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@font-face {
font-family: "test_font_face";
src: url(../font-face/digital-7_mono.ttf);
}
*{
margin: 0;padding: 0;}
.box{
width: 800px;height: 600px;border: 1px solid black;margin: 30px auto;perspective: 600px;perspective-origin: top;}
.box ul{
list-style:none;width: 100px ;height: 200px;position:relative;margin: 100px auto;transform-style: preserve-3d;transform:rotate3d(center center 0);}
.box ul li{
width: 100px;height:200px;position:absolute;text-align: center;line-height: 200px;opacity: 0.5;font-family: "test_font_face";font-size: 50px;}
.box ul li:nth-of-type(2){
outline:3px solid white;background: #3972fe;left: 0;top: 0;transform: rotateY(60deg) translateZ(140px);}
.box ul li:nth-of-type(1){
outline:3px solid white;background: #3972fe;left: 0;top: 0;transform: rotateY(0) translateZ(140px);}
.box ul li:nth-of-type(3){
outline:3px solid white;background: #3972fe;left: 0;top: 0;transform: rotateY(120deg) translateZ(140px);}
.box ul li:nth-of-type(4){
outline:3px solid white;background: #3972fe;left: 0;top: 0;transform: rotateY(180deg) translateZ(140px);}
.box ul li:nth-of-type(5){
outline:3px solid white;background: #3972fe;left: 0;top: 0;transform: rotateY(240deg) translateZ(140px);}
.box ul li:nth-of-type(6){
outline:3px solid white;background: #3972fe;left: 0;top: 0;transform: rotateY(300deg) translateZ(140px);}
.box ul li:nth-of-type(7){
width:115px;height: 200px;background:#3972fe;left: -100px;top: 0px;transform: rotateX(90deg) translateZ(-120px) translateX(100px);opacity: 1;}
.box ul li:nth-of-type(8){
width:115px;height: 200px;background:#3972fe;left:0 ;top: 0px;transform:rotateX(90deg) rotateZ(60deg) translateZ(-120px);opacity: 1;}
.box ul li:nth-of-type(9){
width:115px;height: 200px;background:#3972fe;left:0 ;top: 0px;transform:rotateX(90deg) rotateZ(120deg) translateZ(-120px);opacity: 1;}
.box:hover ul{
animation:move 3s infinite linear;}
@keyframes move{
0%{
transform: rotateY(0);}
100%{
transform: rotateY(-360deg);}
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>