服务器之家
您的位置： 首页 编程语言 css

3d旋转正方体的多种html和css制作方法和相关知识复习讲解

100人浏览   2024-11-10 16:15:07


开始讲课，生动的例子，不同的代码结构和分析

2 注意：css的位置，6个面颜色统一定义和未在css中定义单独的@keyframes。

2.1 效果图：cube1


2.2 代码：cube1.html

<!DOCTYPE HTML>
<html>
<head>
<!--meta http-equiv="Content-Type" content="text/html; charset=utf-8"-->
<meta charset="utf-8">
<title>正方体cube2</title>
<!--css放在head中-->
<style type="text/css">
/*body内的背景颜色才是网页的背景颜色*/
body{
	background:rgba(95, 107, 26, 0.5); 
}
* {margin:10; padding:10}
ul li {list-style:none}
/*margin:100px就是与上线的距离*/
.box {width:100%; height:100%;margin:100px auto; position:relative; perspective:800px;}
	.box ul {width:300px; height:300px; position:absolute;left:0; top:300px; bottom:0; right:0; margin:auto; transform-style:preserve-3d; transition:all 10s; }
	.box ul:hover {transform:rotateX(360deg) rotateY(360deg);}
	.box ul li {width:300px; height:300px; text-align:center; line-height:300px; position:absolute; font-size:48px; backface-visibility:hidden;}
	.box ul li:nth-child(1) {background:rgba(255,0,0,.5); transform:translateY(-150px) rotateX(90deg);}
	.box ul li:nth-child(2) {background:rgba(0,255,0,.5); transform:translateY(150px) rotateX(-90deg);}
	.box ul li:nth-child(3) {background:rgba(0,0,255,.5); transform:translateX(-150px) rotateY(-90deg);}
	.box ul li:nth-child(4) {background:rgba(0,155,255,.5); transform:translateX(150px) rotateY(90deg);}
	.box ul li:nth-child(5) {background:rgba(255,0,255,.5);transform: translateZ(150px);}
	.box ul li:nth-child(6) {background:rgba(82, 231, 144, 0.5); transform:translateZ(-150px) rotateY(180deg);}
</style>
</head>
<body>
<!--div的class的ul-li法-->
<div class="box">
    <ul>
        <li>上</li>
        <li>下</li>
        <li>左</li>
        <li>右</li>
        <li>前</li>
        <li>后</li>
    </ul>
</div>
</body>
</html>

3 与上面稍有不同，就是6个面颜色单独定义，且位置居中设置，注意还采用div的class的ul-li法。

3.1 效果图：cube2


3.2 代码：cube2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正方体cube3</title>
    <link rel="stylesheet" href="./cube3.css">
</head>
<body>
   <div class="contain">
       <div class="box">
           <div class="face one"> </div>
           <div class="face two"> </div>
           <div class="face three"> </div>
           <div class="face four"> </div>
           <div class="face five"> </div>
           <div class="face six"> </div>
       </div>
   </div>
</body>
</html>

4 采用css作为单独文件，本地引用和加入@keyframe的动画定义。

4.1 效果图：cube3


4.2 html代码：cube3.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>正方体cube4</title>
	<!--css在head中-->
	<style>
		body{
			background-color: black;
		}
		.wrapper{
		/*左边400px的距离*/
			margin-left: 400px;
			margin-top: 200px;
			position: relative;
			perspective: 1600px;	/*景深*/
		}
		.content{
			animation: wang 6s ease-in-out infinite;
			color: #fff;
			text-align: center;
			line-height: 200px;
			/*内容是面的文字的字体大小*/
			font-size: 80px;
			height: 200px;
			width: 200px;
			position: relative;
			transform-style: preserve-3d;		/*使子元素成3D显示*/
		}
		.content:hover{
			animation-play-state: paused;		/*鼠标移入暂停动画*/
		}	
		.box{
			/*0.7代表透视效果，值越大，颜色月亮，透视越差*/
			opacity: 0.5;
			position: absolute;
			width: 200px;
			height: 200px;
		}
		.before{
			transform: translateZ(100px);
			background-color: #fae48c;
		}
		.after{
			transform: translateZ(-100px);
			background-color: black;
		}
		.left{
			transform: rotateY(-90deg) translateZ(100px);
			background-color: #9900CC;
		}
		.right{
			transform: rotateY(90deg) translateZ(100px);
			background-color: yellow;
		}
		.up{
			transform: rotateX(90deg) translateZ(100px);
			background-color: green;
		}
		.down{
			transform: rotateX(-90deg) translateZ(100px);
			background-color: greenyellow;
		}
		/*定义动画*/
		@keyframes wang{
			100% {
				transform:rotateY(360deg) rotateX(360deg);
			}
		}
	</style>
</head>
<body>
	<div class="wrapper">
		<div class="content">
			<!--注意div之后的数字，是显示中面中间的文字-->
			<div class="before box">1</div>
			<div class="after box">2</div>
			<div class="up box">3</div>
			<div class="down box">4</div>
			<div class="left box">5</div>
			<div class="right box">6</div>
		</div>
	</div>
</body>
</html>

4.3 cube3.css代码：

/*背景颜色*/
body{
    background-color: #caecec;
}
.contain {
    position: relative;
    perspective: 1600px;
    animation: rotate-frame 30s linear infinite;
}
.box {
    animation: rotate 20s ease 0s normal none infinite running ;
    height: 240px;
    /*与网页上线的距离*/
    margin: 100px auto;
    position: relative;
    transform-style: preserve-3d;
    width: 240px;
}
.face {
    backface-visibility: hidden;
    background-color: #9efa8c;
    height: 240px;
    opacity: 0.6;
    position: absolute;
    width: 240px;
}
.box .one {
    background-color: #fa8c95;
    transform: rotateX(90deg) translateZ(120px);
}
.box .two {
    background-color:#9900CC ;
    transform: translateZ(120px);
}
.box .three {
    transform: rotateY(90deg) translateZ(120px);
    background-color: yellow;
}
.box .four {
    transform: rotateY(180deg) translateZ(120px);
    background-color: green;
}
.box .five {
    transform: rotateY(-90deg) translateZ(120px);
    background-color: greenyellow;
}
.box .six {
    transform: rotateX(-90deg) translateZ(120px) rotate(180deg);
    background-color: black;
}
/*定义动画，一般放在后面*/
@keyframes rotate {
    100% {
        transform: rotateY(360deg) rotateX(360deg);
    }
}

5 注意旋转方向设置、界面中的文字大小、位置和界面的透视度。

5.1 效果图：cube4


5.2 cube4.html代码：


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>正方体cube5</title>
<style>
*{
      margin:0 auto;
      padding:0;
    }
    /*注意html和body的背景颜色设置都是差不多*/
    html{
      background:rgb(14, 13, 13);
    }
    /*wrap=包裹*/
    div.wrap{
      width:200px;
      perspective:1600px;/*景深*/
      position:absolute;
      left:50%;
      top:50%;
      transform: translateX(-50%) translateY(-50%);/*利用位移来处理垂直水平居中*/
    }
    .wrap>div.cube{
      width:200px;
      height:200px;
      /*文字位置*/
      text-align: center;
      /*界面中的文字大小，注意可以使80px，也可以large这类的英文*/
      font-size: 80px;
      position:relative;
      transform-style: preserve-3d;
      transform:rotateX(-50deg) rotateY(-50deg) rotateZ(0deg);/*旋转*/
      animation:move 8s infinite linear;/*动画*/
    }
    .cube>div{
      width:100%;
      height:100%;
      border-radius:20px;
      position:absolute;
      background:pink;
      box-shadow:0 0 10px currentColor;/*currentColor关键字的使用值是 color 属性值的计算值*/
    }
    /*hover=徘徊，盘旋*/
    .cube:hover>div{
      background:currentColor;
      box-shadow:0 0 20px currentColor;
    }
    .cube div.out-front{
      color: deeppink;
      transform:translateZ(100px);/*转换  位移*/
    }
    .cube div.out-back{
      color: seagreen;
      transform:translateZ(-100px) rotateY(180deg);/*转换 位移 旋转*/
    }
    .cube div.out-left{
      color: skyblue;
      transform:translateX(-100px) rotateY(-90deg);
    }
    .cube div.out-right{
      color: lightcoral;
      transform:translateX(100px) rotateY(90deg);
    }
    .cube div.out-top{
      color: mediumseagreen;
      transform:translateY(-100px) rotateX(90deg);
    }
    .cube div.out-bottom{
      color: dodgerblue;
      transform:translateY(100px) rotateX(-90deg);
    }
    /*关键帧，定义动画*/
    @keyframes move{
      0% {
        transform: rotateX(0deg) rotateY(0deg);
      }
      100% {
        transform: rotateX(360deg) rotateY(360deg);
      }
    }
</style>
</head>
<body>
</div>
      <div class="wrap">
          <div class="cube">
            <div class="out-front">1</div>
            <div class="out-back">2</div>
            <div class="out-left">3</div>
            <div class="out-right">4</div>
            <div class="out-top">5</div>
            <div class="out-bottom">6</div>
          </div>
      </div>
    </body>
</html>

6 注意多彩界面动态变化，html和body的背景颜色和圆角设置。

竟然加入几个英文单词学习。

6.1 效果图：cube5


6.2 cube5.html代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>正方体cube6</title>
</head>
<!--css放在非head和非body的独立位置，之间的位置-->
<style>
/*这种一起设置，就是相同性一致设置*/
html,body{
margin: 0;
padding: 0;
/*背景颜色为黑色*/
background-color: black;
}
/* 也是这些基本相同，一起定义设置；给每个div设置宽高，水平垂直居中 */
.container,
.container .outer,
.container .inner,
.container .inner div{
width: 16rem;
height: 16rem;
/*界面的文字颜色、大小，位置设置*/
color:yellow;
font-size: 1.8rem;
text-align: center;
line-height: 16rem;
}
/* 设置container的旋转效果，取名为roate_y,4秒、线性变化、无线循环 */
.container{
/*与网页上线的距离*/
margin: 150px auto;
animation: roate_y 4s linear infinite;
transform-style: preserve-3d;
}
/* 立方体以Y轴为中心，旋转360度 之后每4s重复*/
@keyframes roate_y{
from{transform: rotateY(0);}
to{transform: rotateY(360deg);}
}
.container .outer{
transform-style: preserve-3d;
transform: rotateX(55deg);
}
.container .inner{
transform-style: preserve-3d;
transform: rotateY(45deg);
position: relative;
}
.container .inner div{
transform-style: preserve-3d;
position: absolute;
}
.container .plane-1{
background: rgba(167, 10, 18, 0.3);
right: -8rem;
transform: rotateY(90deg);
}
.container .plane-2{
background: rgba(12, 219, 219, 0.3);
left: -8rem;
transform: rotateY(90deg);
}
.container .plane-3{
background: rgba(255, 174, 127, 0.3);
transform: translateZ(-8rem);
}
.container .plane-4{
background: rgba(68, 0, 255, 0.3);
transform: translateZ(8rem);
}
.container .plane-5{
background: rgba(98, 133, 42, 0.3);
transform: rotateX(-90deg);
bottom: -8rem;
}
.container .plane-6{
background: rgba(127,127,127,0.3);
transform: rotateX(-90deg);
top: -8rem;
}
</style>
<body>
<div class="container">
<div class="outer">
	<div class="inner">
		<div class="plane-1">右</div>
		<div class="plane-2">左</div>
		<div class="plane-3">后</div>
		<div class="plane-4">前</div>
		<div class="plane-5">下</div>
		<div class="plane-6">上</div>
	</div>
</div>
</div>
</body>
</html>

7 重点关注旋转角度的不同设置，仔细比较与上面的各自不同。

还有基础知识：

/*浏览器默认的字号16px，来看一些px单位与rem之间的转换关系：16px=1rem

为了方便计算，时常将在<html>元素中设置font-size值为62.5%:

相当于在<html>中设置font-size为10px,则16px=1.6rem

*/

7.1 效果图：cube6


7.2 cube6.html代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>正方体cube6</title>
</head>
<!--css放在非head和非body的独立位置，之间的位置-->
<style>
/*这种一起设置，就是相同性一致设置*/
html,body{
margin: 0;
padding: 0;
/*背景颜色为黑色*/
background-color: black;
}
/* 也是这些基本相同，一起定义设置；给每个div设置宽高，水平垂直居中 */
.container,
.container .outer,
.container .inner,
.container .inner div{
width: 16rem;
height: 16rem;
/*界面的文字颜色、大小，位置设置*/
color:yellow;
font-size: 1.8rem;
text-align: center;
line-height: 16rem;
}
/* 设置container的旋转效果，取名为roate_y,4秒、线性变化、无线循环 */
.container{
/*与网页上线的距离*/
margin: 150px auto;
animation: roate_y 4s linear infinite;
transform-style: preserve-3d;
}
/* 立方体以Y轴为中心，旋转360度 之后每4s重复*/
@keyframes roate_y{
from{transform: rotateY(0);}
to{transform: rotateY(360deg);}
}
.container .outer{
transform-style: preserve-3d;
transform: rotateX(55deg);
}
.container .inner{
transform-style: preserve-3d;
transform: rotateY(45deg);
position: relative;
}
.container .inner div{
transform-style: preserve-3d;
position: absolute;
}
.container .plane-1{
background: rgba(167, 10, 18, 0.3);
right: -8rem;
transform: rotateY(90deg);
}
.container .plane-2{
background: rgba(12, 219, 219, 0.3);
left: -8rem;
transform: rotateY(90deg);
}
.container .plane-3{
background: rgba(255, 174, 127, 0.3);
transform: translateZ(-8rem);
}
.container .plane-4{
background: rgba(68, 0, 255, 0.3);
transform: translateZ(8rem);
}
.container .plane-5{
background: rgba(98, 133, 42, 0.3);
transform: rotateX(-90deg);
bottom: -8rem;
}
.container .plane-6{
background: rgba(127,127,127,0.3);
transform: rotateX(-90deg);
top: -8rem;
}
</style>
<body>
<div class="container">
<div class="outer">
	<div class="inner">
		<div class="plane-1">右</div>
		<div class="plane-2">左</div>
		<div class="plane-3">后</div>
		<div class="plane-4">前</div>
		<div class="plane-5">下</div>
		<div class="plane-6">上</div>
	</div>
</div>
</div>
</body>
</html>

8 旋转的3d正方体的界面展开和收回，css的位置。

8.1 效果图：cube7


8.2 cube7.html代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>正方体cube7</title>
</head>
<!--css放在head和body之间-->
<style>
body{
    /*body和html内的背景颜色设置*/
    background-color: black;
}
* {
    margin: 0;
    padding: 0;
}
.box {
    width: 200px;
    height: 250px;
    margin: 10px auto;
    /*与上面顶线的间距150px*/
    margin-top: 150px;
    position: relative;
    transform-style: preserve-3d;
    animation: change 10s linear infinite alternate;
}
.box>div {
    width: 200px;
    height: 200px;
    position: absolute;
    transition: all 3s;
}
.box:hover>div {
    width: 300px;
    height: 300px;
}
.box:hover>.tx1 {
    transform: rotateX(90deg) translateZ(170px);
}
.box:hover>.tx2 {
    transform: rotateX(90deg) translateZ(-170px);
}
.box:hover>.ty3 {
    transform: rotateY(90deg) translateZ(170px);
}
.box:hover>.ty4 {
    transform: rotateY(90deg) translateZ(-170px);
}
.box:hover>.tz5 {
    transform: rotateZ(90deg) translateZ(170px);
}
.box:hover>.tz6 {
    transform: rotateZ(90deg) translateZ(-170px);
}
.box>div:nth-child(1) {
    /*渐变色代替*/
    background: linear-gradient(45deg, red, orange);
    transform: rotateX(90deg) translateZ(100px);
}
.box>div:nth-child(2) {
    /*渐变色代替*/
    background: linear-gradient(45deg, orange, yellow);
    transform: rotateX(90deg) translateZ(-100px);
}
.box>div:nth-child(3) {
    /*渐变色代替*/
    background: linear-gradient(45deg, yellow, green);
    transform: rotateY(90deg) translateZ(100px);
}
.box>div:nth-child(4) {
    /*渐变色代替*/
    background: linear-gradient(45deg, green, blue);
    transform: rotateY(90deg) translateZ(-100px);
}
.box>div:nth-child(5) {
    /*渐变色代替*/
    background: linear-gradient(45deg, blue, #065279);
    transform: translateZ(100px);
}
.box>div:nth-child(6) {
    /*渐变色代替*/
    background: linear-gradient(45deg, #065279, purple);
    transform: translateZ(-100px);
}
/*定义动画*/
@keyframes change {
    0% {
        transform: rotateX(45deg) rotateZ(30deg);
    }
    25% {
        transform: rotateX(111deg) rotateY(30deg);
    }
    60% {
        transform: rotateZ(135deg) rotateZ(70deg);
    }
    100% {
        transform: rotateY(205deg) rotateZ(200deg);
    }
}
</style>
<body>
<!-- 正方体旋转 -->
<div class="box">
    <div class="tx1"></div>
    <div class="tx2"></div>
    <div class="ty3"></div>
    <div class="ty4"></div>
    <div class="tz5"></div>
    <div class="tz6"></div>
</div>
</body>
</html>


相关推荐