小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
路难行，行路难，一身汗水，满心长。脚下百里路，头顶艳阳天。坚定如磐石，信念似火烧。好男儿，人穷志不缺，天道也酬勤。四方走，走四方，一身是胆，豪气壮。前方坎坷途，千难万般阻。心若有明灯，身似般若行。好男儿，大志存高远，四海皆为家。
3D位移
translateZ()函数用于将元素在3D空间沿Z轴进行位移。
translateZ(t)
- t:表示乙轴移动的偏移量。当其值为正值时，元素向Z轴越移动越近，导致元素变得越大;反之其值为负值时，元素向Z轴越移动越远，导致元素变得越小。
CSS3中还提供了translate3d())函数用于将元素在3D空间进行位移。
translate3d(tx.ty.tz)
- tx:表示X轴移动的偏移量。
- ty:表示Y轴移动的偏移量。
- tz:表示乙轴移动的偏移量。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D平移</title>
<style>
.container {
transform-style: preserve-3d;
transform: rotateX(-15deg) rotateY(15deg);
}
.container div {
width: 300px;
height: 200px;
}
.container div:nth-child(1) {
background-color: pink;
/*
HTMl结构 - 父级与子级的关系
* 作为父级容器的元素
* 设置其所有子元素是3D效果
transform-style: preserve-3d;
* 将当前元素进行旋转
* 作为子级元素
* 实现Z轴的平移效果
*/
transform: translateZ(50px);
}
</style>
</head>
<body>
<div class="container">
<div></div>
</div>
</body>
</html>
3D旋转
rotateZ()的数用于将元素在3D空间沿Z轴进行旋转。
rotateZ(a)
- a:表示Z轴进行旋转
CSS3中还提供了rotate3d()函数用于将元素在3D空间进行旋转。
rotate3d(x,y,z,a)
- x:表示X轴旋转的矢量值。
- y:表示Y轴移动的矢量值。
- z:表示乙轴移动的矢量值。
- a:表示旋转的角度值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D旋转</title>
<style>
/* .container {
transform-style: preserve-3d;
} */
.container div {
width: 300px;
height: 200px;
}
.container div:nth-child(1) {
background-color: plum;
/* 3D旋转至少使用两个轴的旋转 */
transform: rotateX(-30deg) rotateZ(30deg);
}
</style>
</head>
<body>
<div class="container">
<div></div>
</div>
</body>
</html>
3D缩放
scaleZ()函数用于将元素在3D空间沿Z轴进行缩放。
scaleZ(s)
- s:表示Z轴的缩放向量
CSS3中还提供了scale3d()函数用于将元素在3D空间进行缩放。
scale3d(sx,sy,sz)
- sx:表示X轴的缩放向量。
- sy:表示Y轴的缩放向量。
- sz:表示Z轴的缩放向量。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D缩放</title>
<style>
.container {
width: 367px;
height: 297px ;
background-image: url("imgs/花格布.jpg");
background-repeat: no-repeat;
position: relative;
display: inline-block;
}
.container img {
width: 150px;
display: block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.box {
/* 开启3d空间中的透视效果 */
perspective: 1000px;
}
.box img#imgs1 {
transform: scaleX(0.5);
}
.box img#imgs2 {
transform: scaleY(0.5);
}
.box img#imgs3 {
transform: scaleZ(0.5);
}
</style>
</head>
<body>
<div class="container">
<img src="imgs/u=3517379166,729986227&fm=26&gp=0.jpg.png">
</div>
<div class="container box">
<img id="imgs1" src="imgs/u=3517379166,729986227&fm=26&gp=0.jpg.png">
</div>
<div class="container box">
<img id="imgs2" src="imgs/u=3517379166,729986227&fm=26&gp=0.jpg.png">
</div>
<div class="container box">
<img id="imgs3" src="imgs/u=3517379166,729986227&fm=26&gp=0.jpg.png">
</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>3D立体效果</title>
<style>
.container {
width: 300px;
height: 300px;
border: 1px solid black;
margin: 100px auto;
position: relative;
perspective: 300px;
}
.face {
width: 200px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
}
.front {
transform: translateZ(100px);
border: 1px solid black;
}
.back {
transform: translateZ(-100px);
border: 1px solid black;
}
.left {
transform: rotateY(90deg) translateZ(-100px);
border: 1px solid black;
}
.right {
transform: rotateY(90deg) translateZ(100px);
border: 1px solid black;
}
.top {
transform: rotateX(90deg) translateZ(100px);
border: 1px solid black;
}
.bottom {
transform: rotateX(90deg) translateZ(-100px);
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container">
<div class="face front"></div>
<div class="face back"></div>
<div class="face left"></div>
<div class="face right"></div>
<div class="face top"></div>
<div class="face bottom"></div>
</div>
</body>
</html>
