注意:
文中的img标签 全部变成了macdown格式
一. 什么是2D和3D
1.什么是2D和3D
2D就是一个平面, 只有宽度和高度, 没有厚度
3D就是一个立体, 有宽度和高度, 还有厚度
默认情况下所有的元素都是呈2D展现的
2.如何让某个元素呈3D展现
和透视一样, 想看到某个元素的3d效果, 只需要给他的父元素添加一个transform-style属性, 然后设置为preserve-3d即可
3.transform-style的取值:
flat:默认取值,二维的;
preserve-3d:3D效果;
<html lang="en">
<head>
<meta charset="UTF-8">
<title>106-3D转换模块</title>
<style>
*{
margin: 0;
padding: 0;
}
.father{
width: 200px;
height: 200px;
background-color: red;
border: 1px solid #000;
margin: 100px auto;
perspective: 500px;
transform-style: preserve-3d; //给父元素添加transform-style: preserve-3d属性
transform: rotateY(0deg); //用于在在开发者工具中调试父元素的位置
}
.son{
width: 100px;
height: 100px;
background-color: blue;
border: 1px solid #000;
margin: 0 auto;
margin-top: 50px;
transform: rotateY(45deg);
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
二. 正方体(有瑕疵,页面文字显示有问题)
<html lang="en">
<head>
<meta charset="UTF-8">
<title>107-3D转换模块-正方体</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
width: 200px;
height: 200px;
border: 1px solid #000;
box-sizing: border-box;
margin: 100px auto;
position: relative;
transform: rotateY(0deg) rotateX(0deg);
transform-style: preserve-3d;
}
ul li{
list-style: none;
width: 200px;
height: 200px;
font-size: 60px;
text-align: center;
line-height: 200px;
position: absolute;
left: 0;
top: 0;
}
ul li:nth-child(1){
background-color: red;
transform: translateX(-100px) rotateY(90deg);
//li的宽度为200px,为什么平移100px呢?
//因为元素的默认形变中心点在中心位置,所以在x轴上移动一半的宽度,旋转90度,平面刚好在边上;
}
ul li:nth-child(2){
background-color: green;
transform: translateX(100px) rotateY(90deg);
}
ul li:nth-child(3){
background-color: blue;
transform: translateY(-100px) rotateX(90deg);
}
ul li:nth-child(4){
background-color: yellow;
transform: translateY(100px) rotateX(90deg);
}
ul li:nth-child(5){
background-color: purple;
transform: translateZ(-100px);
}
ul li:nth-child(6){
background-color: pink;
transform: translateZ(100px);
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
</html>
正方体(有瑕疵,仅供了解)
三. 正方体(终极方案)
旋转90度后,坐标系也跟着旋转了90度,故应该沿着z轴移动;
立体效果攻略:先旋转一定的度数,再沿z轴平移
<html lang="en">
<head>
<meta charset="UTF-8">
<title>108-3D转换模块-正方体终极</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
width: 200px;
height: 200px;
border: 1px solid #000;
box-sizing: border-box;
margin: 100px auto;
position: relative;
transform: rotateY(0deg) rotateX(0deg);
transform-style: preserve-3d;
}
ul li{
list-style: none;
width: 200px;
height: 200px;
font-size: 60px;
text-align: center;
line-height: 200px;
position: absolute;
left: 0;
top: 0;
}
//为保证文字的正反是正确的
//先编写上面,在编写对面,在编写下面,在编写正对着自己那一面,最后编写左右两面的
ul li:nth-child(1){
background-color: red;
transform: rotateX(90deg) translateZ(100px);
//旋转90度后,坐标系也跟着旋转了90度,故应该沿着z轴移动
}
ul li:nth-child(2){
background-color: green;
transform: rotateX(180deg) translateZ(100px);
}
ul li:nth-child(3){
background-color: blue;
transform: rotateX(270deg) translateZ(100px);
}
ul li:nth-child(4){
background-color: yellow;
transform: rotateX(360deg) translateZ(100px);
}
ul li:nth-child(5){
background-color: purple;
transform: translateX(-100px) rotateY(90deg);
}
ul li:nth-child(6){
background-color: pink;
transform: translateX(100px) rotateY(90deg);
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
</html>
正方体完美方案
四.长方体广告
先按正方体编写代码,只需要水平方向上放大N倍,就会呈现长方体效果
<html lang="en">
<head>
<meta charset="UTF-8">
<title>110-3D转换模块-练习</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
/*想看到整个立方的近大远小效果, 就给ul的父元素添加透视, ul的父元素就是body*/
perspective: 500px;
}
ul{
width: 200px;
height: 200px;
box-sizing: border-box;
margin: 100px auto;
position: relative;
transform: rotateY(0deg) rotateX(0deg); //用作调试3d界面用
transform-style: preserve-3d;
animation: sport 5s linear 0s infinite normal;
}
ul li{
list-style: none;
width: 200px;
height: 200px;
font-size: 60px;
text-align: center;
line-height: 200px;
position: absolute;
left: 0;
top: 0;
}
ul li:nth-child(1){
background-color: red;
transform: rotateX(90deg) translateZ(100px) scale(2, 1);
//水平方向上放大2倍,垂直方向上不变,就会呈现长方体效果
}
ul li:nth-child(2){
background-color: green;
transform: rotateX(180deg) translateZ(100px) scale(2, 1);
}
ul li:nth-child(3){
background-color: blue;
transform: rotateX(270deg) translateZ(100px) scale(2, 1);
}
ul li:nth-child(4){
background-color: yellow;
transform: rotateX(360deg) translateZ(100px) scale(2, 1);
}
ul li:nth-child(5){
background-color: purple;
transform: translateX(-200px) rotateY(90deg);
}
ul li:nth-child(6){
background-color: pink;
transform: translateX(200px) rotateY(90deg);
}
ul li img{
/*
注意点:
只要父元素被拉伸了,子元素也会被拉伸,所以img的大小应和父元素的大小一致
*/
width: 200px;
height: 200px;
}
@keyframes sport {
from{
transform: rotateX(0deg);
}
to{
transform: rotateX(360deg);
}
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
长方体广告
五.3D音乐播放器
注意点:
background-size:cover; 使图片填充整个网页
@keyframes sport {
from{
/*
注意点:
1.动画中如果有和默认样式中同名的属性, 会覆盖默认样式中同名的属性
2.在编写动画的时候, 固定不变的值写在前面, 需要变化的值写在后面
例如:
transform: rotateX(-10deg) rotateY(0deg); >> rotateX(-10deg)为固定不变的
rotateY(0deg)是变化的,所以rotateX(-10deg)写在前面,如果把它写在后面,会有意想不到的效果,
这个效果肯定不是我们想要的
*/
transform: rotateX(-10deg) rotateY(0deg);
}
to{
transform: rotateX(-10deg) rotateY(360deg);
}
}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>111-3D播放器下</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background: url("images/jacky/bg.jpg") no-repeat;
background-size:cover;
overflow: hidden; //当桃心运动到最右边时,网页会出现滚动条,故隐藏掉滚动条
}
ul{
width: 200px;
height: 200px;
/*background-color: red;*/
position: absolute;
bottom: 100px;
left: 50%;
margin-left:-100px; //元素宽度的一半 = 100px,主要配合left: 50%;设置水平居中
transform-style: preserve-3d;
/*transform: rotateX(-10deg);*/
//未执行动画时,写上可以显示俯视效果,
//执行动画时,动画里面的transform: rotateY(0deg);会把它层叠掉,故把该代码注释
//掉,写在执行动画的代码中 transform: rotateX(-10deg) rotateY(0deg);
animation: sport 6s linear 0s infinite normal;
}
ul li{
list-style: none;
width: 200px;
height: 200px;
font-size: 60px;
text-align: center;
line-height: 200px;
position: absolute;
left: 0;
top: 0;
background-color: black;
}
ul li:nth-child(1){
transform: rotateY(60deg) translateZ(200px);
}
ul li:nth-child(2){
transform: rotateY(120deg) translateZ(200px);
}
ul li:nth-child(3){
transform: rotateY(180deg) translateZ(200px);
}
ul li:nth-child(4){
transform: rotateY(240deg) translateZ(200px);
}
ul li:nth-child(5){
transform: rotateY(300deg) translateZ(200px);
}
ul li:nth-child(6){
transform: rotateY(360deg) translateZ(200px);
}
ul li img{
width: 200px;
height: 200px;
border: 5px solid skyblue;
box-sizing: border-box;
}
ul:hover{
animation-play-state: paused; //ul只要被hover,动画就停止
}
ul:hover li img{
opacity: 0.5; //通过透明度实现蒙版效果,记住背景得为黑色哦!!!
}
ul li:hover img{
opacity: 1; //被hover的li不需要蒙版
}
@keyframes sport {
from{
/*
注意点:
1.动画中如果有和默认样式中同名的属性, 会覆盖默认样式中同名的属性
2.在编写动画的时候, 固定不变的值写在前面, 需要变化的值写在后面
例如:
transform: rotateX(-10deg) rotateY(0deg); >> rotateX(-10deg)为固定不变的
rotateY(0deg)是变化的,所以rotateX(-10deg)写在前面,如果把它写在后面,会有意想不到的效果,
这个效果肯定不是我们想要的
*/
transform: rotateX(-10deg) rotateY(0deg);
}
to{
transform: rotateX(-10deg) rotateY(360deg);
}
}
//设置桃心
.heart{
width: 173px;
height: 157px;
position: absolute; //通过定位来设置初始位置
left: 100px;
bottom: 100px;
animation: move 10s linear 0s infinite normal;
}
//桃心动画
@keyframes move {
0%{
left: 100px;
bottom: 100px;
opacity: 1; //桃心看得见
}
20%{
left: 300px;
bottom: 300px;
opacity: 0; //桃心隐藏
}
40%{
left: 500px;
bottom: 500px;
opacity: 1;
}
60%{
left: 800px;
bottom: 300px;
opacity: 0;
}
80%{
left: 1200px;
bottom: 100px;
opacity: 1;
}
100%{
left: 800px;
bottom: -200px;
}
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
 //背景图片:都变成macdown格式鸟
<audio src="images/jacky/江哥最爱的歌.mp3" autoplay="autoplay" loop="loop"></audio>
</body>
</html>
3D音乐播放器
