3D
简称3维坐标系 比二维坐标系多一个Z轴
3D変位
3D変位には、2Dに基づいて移動可能なZ軸があります
変換：translate3d（x、y、z）;
<!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>
* {
margin: 0;
padding: 0;
}
.box {
width: 200px;
height: 200px;
background-color: blue;
/* 位移3D的写法 */
/* transform: translate3d(200px, 200px, 200px); */
/* 或者可以这样写 */
transform: translateX(400px) translateY(400px) translateZ(400px);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
予防
- x軸とy軸は通常、ピクセルとパーセンテージを単位として使用します
- z軸は通常pxを単位として使用し、パースペクティブ関数を使用する必要があります
- 外側に移動するz軸は通常正の値であり、内側に移動するz軸は負の値です。
視点
特徴
- パースペクティブは表示距離、単位はピクセルです
- パースペクティブは、監視対象要素の親要素に書き込まれます。
- パースペクティブユニットが大きいほど、表示されるオブジェクトは小さくなり、パースペクティブユニットが小さいほど、表示されるオブジェクトは大きくなります。
- 固定遠近法の場合、z軸が大きいほど、表示されるオブジェクトは大きくなり、z軸が小さいほど、表示されるオブジェクトは小さくなります。
この写真では、dは遠近法であり、人間の目と観察対象の間にあります。
<!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>
* {
margin: 0;
padding: 0;
}
body {
perspective: 500px;
}
.box {
width: 200px;
height: 200px;
margin: 200px auto;
background-color: blue;
transform: translateZ(100px);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
3D回転
3D回転とは、要素を3次元平面内で、x軸、y軸、z軸、またはカスタム軸に沿って回転できることを意味します。
rotateX
左手の曲がった指の方向は、x軸の正の方向です。
<!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>
* {
margin: 0;
padding: 0;
}
body {
/* 3D效果的实现，必须依赖于透视 */
perspective: 500px;
}
img {
display: block;
/* 设置圆角边框 */
border-radius: 50%;
width: 500px;
/* 使用动画 */
animation: move 2s linear 0s infinite alternate;
/* 让元素居中对齐 */
margin: 200px auto;
}
/* 定义动画 */
@keyframes move {
form {
transform: rotateX(0deg);
}
to {
transform: rotateX(360deg);
}
}
</style>
</head>
<body>
<img src="./img/girl.jpg" alt="">
</body>
</html>
回転Y
左手の指が曲がる方向は、y軸の正の方向です。
<!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>
* {
margin: 0;
padding: 0;
}
body {
/* 加此属性是为了更好的使用3d效果 */
perspective: 500px;
}
img {
/* 转换成块级元素 */
display: block;
width: 500px;
/* 移动的中心位置 */
margin: 200px auto;
/* 使用动画 */
animation: move 2s linear 0s infinite alternate;
}
/* 定义动画 */
@keyframes move {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(180deg);
}
}
</style>
</head>
<body>
<img src="./img/girl.jpg" alt="">
</body>
</html>
rotateZ
<!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>
* {
margin: 0;
padding: 0;
}
body {
/* 添加透视 更好的实现3D效果 */
perspective: 500px;
}
img {
/* 转换成块级元素 */
display: block;
width: 500px;
margin: 200px auto;
animation: move 2s linear 0s infinite alternate;
}
/* 定义动画 */
@keyframes move {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
</style>
</head>
<body>
<img src="./img/girl.jpg" alt="">
</body>
</html>
トランスフォームスタイル
transform-style; preserve-3dは子要素を3D空間環境に保持します
<!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>
* {
margin: 0;
padding: 0;
}
body {
perspective: 500px;
}
.box {
/* 开启定位 */
position: relative;
width: 400px;
height: 400px;
margin: 200px auto;
/* 父元素开启3d环境 */
transform-style: preserve-3d;
animation: clinopodium 2s linear 0s infinite alternate;
}
/*使用属性选择器设置样式 */
div[class^=son] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: pink;
}
/* 设置子元素的第二个样式 */
.box div:nth-of-type(2) {
background-color: blue;
transform: rotateX(112deg);
}
.box div:nth-of-type(3) {
background-color: purple;
transform: rotateX(230deg);
}
/* 定义动画 */
@keyframes clinopodium {
0% {
transform: rotatex(0deg);
}
100% {
transform: rotateX(360deg);
}
}
</style>
</head>
<body>
<div class="box">
<div class="son1"></div>
<div class="son2"></div>
<div class="son3"></div>
</div>
</body>
</html>
ケースのデモンストレーション
両面ボックス
- まず、2つの小さな箱が入った大きな箱を用意します
- ボックスの1つを180度回転させます
<!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>
body {
perspective: 400px;
}
.box {
position: relative;
width: 400px;
height: 400px;
margin: 200px auto;
transition: all 1S linear 0s;
/* 开启子元素在3d空间的环境 */
transform-style: preserve-3d;
}
.box:hover {
transform: rotateY(180deg);
}
.front,
.back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
line-height: 400px;
color: #cccccc;
font-weight: 700;
border-radius: 50%;
}
.front {
background-color: pink;
z-index: 1;
}
.back {
background-color: purple;
/* 像手机一样 背靠背 旋转 */
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="box">
<div class="front">尧子陌</div>
<div class="back">临风笑却世间</div>
</div>
</body>
</html>
3Dナビゲーションバーケース
<!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>
/* 注意 视距写在li上面 */
* {
margin: 0;
padding: 0;
}
ul {
width: 600px;
margin: 100px auto;
}
li {
/* 设置定位 子绝父相 */
float: left;
width: 100px;
height: 35px;
list-style: none;
perspective: 500px;
}
.box {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* 开启子元素的 3d效果 */
transform-style: preserve-3d;
/* 使用过渡效果 */
transition: all 0.4s linear 0s;
}
/* 鼠标经过box旋转90deg */
.box:hover {
transform: rotateX(90deg);
}
.front,
.bottom {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
line-height: 35px;
color: cornsilk;
font-family: '楷体';
}
.front {
background-color: blue;
z-index: 1;
transform: translateZ(17.5px);
}
.bottom {
background-color: brown;
/* 先向下移动17.5px 再沿X轴旋转90deg */
transform: translateY(17.5px) rotateX(-90deg);
}
</style>
</head>
<body>
<ul>
<li>
<div class="box">
<div class="front">hello</div>
<div class="bottom">尧子陌</div>
</div>
</li>
<li>
<div class="box">
<div class="front">hello</div>
<div class="bottom">尧子陌</div>
</div>
</li>
</ul>
</body>
</html>
3Dトロイの木馬
アイデア
- 分析は次のとおりです。ボディにパースペクティブを設定し、divの親要素に3D効果を設定します。
- 各ボックスを正しい位置に置き、アニメーションを使用します
<!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>
* {
margin: 0;
padding: 0;
}
body {
/* 视距 */
perspective: 1000px;
}
section {
position: relative;
width: 200px;
height: 200px;
margin: 200px auto;
/* 让子元素显示3d属性 */
transform-style: preserve-3d;
/* 使用动画 */
animation: rotate 2s linear 0s infinite;
}
section:hover {
animation-play-state: paused;
}
@keyframes rotate {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
section div {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
width: 100%;
height: 100%;
border-radius: 50px;
}
div img {
width: 200px;
height: 200px;
}
section div:nth-of-type(1) {
transform: rotateY(0deg) translateZ(300px);
}
section div:nth-of-type(2) {
transform: rotateY(60deg) translateZ(300px);
}
section div:nth-of-type(3) {
transform: rotateY(120deg) translateZ(300px);
}
section div:nth-of-type(4) {
transform: rotateY(180deg) translateZ(300px);
}
section div:nth-of-type(5) {
transform: rotateY(240deg) translateZ(300px);
}
section div:nth-of-type(6) {
transform: rotateY(300deg) translateZ(300px);
}
</style>
</head>
<body>
<section>
<div><img src="./img/girl.jpg" alt=""></div>
<div><img src="./img/girl.jpg" alt=""></div>
<div><img src="./img/girl.jpg" alt=""></div>
<div><img src="./img/girl.jpg" alt=""></div>
<div><img src="./img/girl.jpg" alt=""></div>
<div><img src="./img/girl.jpg" alt=""></div>
</section>
</body>
</html>
ブラウザのプライベートプレフィックス
