1. 3D空间与景深
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>3D空间与景深</title>
<style>
.outer {
width: 200px;
height: 200px;
border: 2px solid black;
margin: 0 auto;
margin-top: 100px;
/* 开启3D空间 */
transform-style: preserve-3d;
/* 设置景深（有了透视效果，近大远小） */
perspective: 500px;
}
.inner {
width: 200px;
height: 200px;
background-color: skyblue;
transform: rotateX(30deg);
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">你好</div>
</div>
</body>
</html>2. 透视点的位置
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>透视点的位置</title>
<style>
/*
默认透视点在开启元素的正中心
*/
.outer {
width: 200px;
height: 200px;
border: 2px solid black;
margin: 0 auto;
margin-top: 100px;
/* 开启3D空间 */
transform-style: preserve-3d;
/* 设置景深（有了透视效果，近大远小） */
perspective: 500px;
/* 设置透视点的位置 */
/* 相对坐标轴往右偏移140px 往下偏移100px（相当于人蹲下了140像素，然后向右移动100像素看元素） */
perspective-origin: 140px 100px;
}
.inner {
width: 200px;
height: 200px;
background-color: skyblue;
transform: rotateX(30deg);
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">你好</div>
</div>
</body>
</html>3. 位移
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>位移</title>
<style>
/*
默认透视点在开启元素的正中心
*/
.outer {
width: 200px;
height: 200px;
border: 2px solid black;
margin: 0 auto;
margin-top: 100px;
/* 开启3D空间 */
transform-style: preserve-3d;
/* 设置景深（有了透视效果，近大远小） */
perspective: 500px;
/* 设置透视点的位置 */
perspective-origin: 140px 100px;
}
.inner {
width: 200px;
height: 200px;
background-color: rgba(0, 191, 255, 0.6);
/* transform: translateZ(200px); */
/* 只能写像素值，不能写百分比 */
transform: translate3D(100px, 100px, 200px);
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">你好</div>
</div>
</body>
</html>4. 旋转
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>旋转</title>
<style>
.outer {
width: 200px;
height: 200px;
border: 2px solid black;
margin: 0 auto;
margin-top: 100px;
/* 开启3D空间 */
transform-style: preserve-3d;
/* 设置景深（有了透视效果，近大远小） */
perspective: 500px;
/* 设置透视点的位置 */
perspective-origin: 140px 100px;
}
.inner {
width: 200px;
height: 200px;
background-color: rgba(0, 191, 255, 0.6);
/* transform: rotateX(45deg); */
transform: rotateY(45deg);
transform: rotate3D(1, 1, 1, 45deg)
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">你好</div>
</div>
</body>
</html>5. 缩放
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>缩放</title>
<style>
.outer {
width: 200px;
height: 200px;
border: 2px solid black;
margin: 0 auto;
margin-top: 100px;
/* 开启3D空间 */
transform-style: preserve-3d;
/* 设置景深（有了透视效果，近大远小） */
perspective: 500px;
/* 设置透视点的位置 */
perspective-origin: 140px 100px;
}
.inner {
width: 200px;
height: 200px;
background-color: rgba(0, 191, 255, 0.6);
/* 设置z轴方向的缩放比例，1表示不缩放，大于1放大，小于1缩小 */
/* transform: scaleZ(1.2); */
/* 第一个参数x轴，第二个参数y轴，第三个参数z轴（参数不能省略） */
transform: scale3d(1.5, 1.5, 1) rotateY(45deg);
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">你好</div>
</div>
</body>
</html>6. 多重变换
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>多重变换</title>
<style>
.outer {
width: 200px;
height: 200px;
border: 2px solid black;
margin: 0 auto;
margin-top: 100px;
/* 开启3D空间 */
transform-style: preserve-3d;
/* 设置景深（有了透视效果，近大远小） */
perspective: 500px;
/* 设置透视点的位置 */
perspective-origin: 140px 100px;
}
.inner {
width: 200px;
height: 200px;
background-color: rgba(0, 191, 255, 0.6);
/* transform-origin: left;
transform: rotateY(45deg); */
/* 多重变换时，建议将旋转放到最后 */
transform: translateZ(100px) scaleZ(2) rotateY(45deg);
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">你好</div>
</div>
</body>
</html>7. 背部可见性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>背部可见性</title>
<style>
.outer {
width: 200px;
height: 200px;
border: 2px solid black;
margin: 0 auto;
margin-top: 100px;
/* 开启3D空间 */
transform-style: preserve-3d;
/* 设置景深（有了透视效果，近大远小） */
perspective: 500px;
/* 设置透视点的位置 */
perspective-origin: 140px 100px;
}
.inner {
width: 200px;
height: 200px;
background-color: rgba(0, 191, 255, 0.6);
transform: rotateY(45deg);
/* 看不到背部 */
backface-visibility: hidden;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">你好</div>
</div>
</body>
</html>
评论 (0)