CSS3——3D变换
程序员文章站
2022-07-12 23:41:15
...
CSS3中的3D变换主要是实现一些3维的旋转，相对于2D旋转，3D旋转多了一个z轴方向的变化，同时为了达到一种视觉效果，3D变换又不是简单的旋转，他还可以设置人眼到平面的距离，透视等等，从而让图像立起来。在用transform属性变换时我们要告诉编译器进行的是3D变换而不是2D，所以要加上一行transform-style：preserve-3d；
1.transform属性——旋转
一个元素可以设置绕着直角坐标系的某一个轴进行旋转
transform：rotateX（） x轴方向的旋转
transform：rotateY（） y轴方向的旋转
transform：rotateZ（） z轴方向的旋转
单位deg，角度制
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS33D变换</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#container{
background-color: rgb(97,119,176);
height: 1000px;
width: 1200px;
/*perspective: 1000px;*/
}
#main{
height: 500px;
width: 500px;
margin: auto;
position: relative;
top: 200px;
transform-style: preserve-3d;
transition: 1s linear;
}
#main:hover{
transform:rotateY(60deg);
}
</style>
</head>
<body>
<div id="container">
<div id="main">
<img src="images/Android.png">
</div>
</div>
</body>
</html>
2.透视属性perspective
对于2D变换，没有透视关系，只有一个简单的平面旋转，而对于3D变换我们可以设置透视属性，达到近大远小的视觉效果。
perspective：100px;
值得注意的是 perspective的值越大表示视距越远，透视效果越弱，反之越强。一般把perspective设置在父容器container或舞台stage中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS33D变换</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#container{
background-color: rgb(97,119,176);
height: 1000px;
width: 1200px;
perspective: 1000px;
}
#main{
height: 500px;
width: 500px;
margin: auto;
position: relative;
top: 200px;
transform-style: preserve-3d;
transition: 1s linear;
}
#main:hover{
transform:rotateY(60deg);
}
</style>
</head>
<body>
<div id="container">
<div id="main">
<img src="images/Android.png">
</div>
</div>
</body>
</html>
前面没有给container设置透视属性显示的是一个简单的压缩效果，没有视距的变化，而perspective内给人一种近大远小的感觉.
3D变换往往结合过渡transform使用，设置一个延迟，下面是一个3D变换的样例。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>3D变换样例</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body{
background-color:#008080;
}
#container{
width: 1100px;
height: 440px;
margin: 100px auto;
border: 1px solid white;
border-radius: 10px;
box-shadow: 5px 5px 10px #C0C0C0;
}
#stage{
width: 1050px;
height:400px;
margin: 18px auto;
border: 1px solid white;
border-radius: 10px;
box-shadow: 5px 5px 10px #C0C0C0;
}
.box{
float: left;
width: 320px;
height: 307px;
margin: 38px 15px;
transform-style: preserve-3d;/*设置变化为3D类型*/
transition: 1.5s;
position: relative;
border-color:#008080;
box-shadow: 5px 5px 10px #C0C0C0;
}
.box:hover{
transform:rotateY(180deg);
}
.face{
width: 300px;
height: 307px;
position: absolute;
}
.front{
border-radius: 2px;
}
.back{
background-color:#282828 ;
border:1px solid #fff;
transform: rotateY(180deg);
border-radius: 2px;
}
.back h2{
color: white;
text-align: center;
line-height: 307px;
}
</style>
</head>
<body>
<div id="container">
<div id="stage">
<div class="box">
<div class="face front"><img src="images/Android.png" alt="403" width="300" height="307"></div>
<div class="face back">
<h2>Android Q</h2>
</div>
</div>
<div class="box">
<div class="face front"><img src="images/Harmony.png" alt="403" width="300" height="307"></div>
<div class="face back">
<h2>Harmony os</h2>
</div>
</div>
<div class="box">
<div class="face front"><img src="images/Apple.png" alt="403" width="300" height="307"></div>
<div class="face back">
<h2>Apple ios</h2>
</div>
</div>
</div>
</div>
</body>
</html>
上一篇： OpenCV轮廓篇--旋转矩形矫正
下一篇： LeetCode每日一题