perspective的介绍
perspertive
- 指定观察者距离z=0平面的距离，为元素及其内容应用透视变换。当值为0或负值时，无透视变换。
- z>0的三维元素比正常大，而z<0时则比正常小，大小程度由该属性的值决定。
-
三维元素在观察者后面的部分不会绘制出来，即z轴坐标值大于perspective属性值的部分。
坐标轴
CSS3的transform
1.transform: rotate方向的详细
牢记一点，不管元素怎么旋转，顺时针的方向为正值。
由于css3引入的新样式，使得页面可以3d变换，其中rotate属性可以让元素旋转
## x轴的旋转(相当于一个横向的标杆插入元素中)
## y轴的旋转(相当于一个纵向的标杆插入元素中)
## z轴的旋转(相当于一个垂直于屏幕的标杆插入元素中)
<div class="container">
<div class="parent">
<div class="child1"></div>
</div>
<div class="parent">
<div class="child2"></div>
</div>
<div class="parent">
<div class="child3"></div>
</div>
</div>
为了增加透视，给父元素设置一个perspective
.container{
height: 500px;
border: 1px red solid;
}
.parent{
border: 1px dotted #000;
width: 100px;
height: 100px;
perspective: 500px;
display: inline-block;
}
.child1{
width: 100px;
height: 100px;
background: #37d7b2;
transform: rotateX(50deg);
}
.child2{
width: 100px;
height: 100px;
background: #37d7b2;
transform: rotateY(50deg);
}
.child3{
width: 100px;
height: 100px;
background: #37d7b2;
transform: rotateZ(50deg);
}
查看demo
2.transform: translate元素移动的详细
transform: translate`可以让元素在x轴，y轴，z轴上面移动，其中z轴方向上移动遵循近大远小的规则。
<div class="container">
<div class="parent">
<div class="child1"></div>
</div>
<div class="parent">
<div class="child2"></div>
</div>
<div class="parent">
<div class="child3"></div>
</div>
</div>
.container{
height: 500px;
border: 1px red solid;
}
.parent{
border: 1px dotted #000;
width: 100px;
height: 100px;
perspective: 500px;
display: inline-block;
}
.child1{
width: 100px;
height: 100px;
background: #37d7b2;
transform: translateX(10px);
}
.child2{
width: 100px;
height: 100px;
background: #37d7b2;
transform: translateY(10px);
}
.child3{
width: 100px;
height: 100px;
background: #37d7b2;
transform: translateZ(100px);
}
查看demo
运用transform:translate() rotate()实现正方体
注意当元素transform: rotate()之后，坐标轴也会发生变化，z轴始终是垂直于元素的
所有demo中transform:translate() rotate()的先后顺序是有区别的，不同的顺序不同的代码
- translate在前面
<div class="container">
<div class="main">
<div>前</div>
<div>后</div>
<div>左</div>
<div>右</div>
<div>上</div>
<div>下</div>
</div>
</div>
css样式表
.container {
width: 800px;
height: 800px;
background: #000;
margin: 0 auto;
}
.container .main {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
animation: play 4s infinite linear;
}
.container .main div {
width: 200px;
height: 200px;
line-height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
text-align: center;
color: #fff;
font-size: 30px;
opacity: 0.5;
}
.container .main div:first-child {
background: #f00;
transform: translateZ(100px);
}
.container .main div:nth-child(2) {
background: #0f0;
transform: translateZ(-100px);
}
.container .main div:nth-child(3) {
background: #00f;
transform: translateX(-100px) rotateY(-90deg);
}
.container .main div:nth-child(4) {
background: yellow;
transform: translateX(100px) rotateY(90deg);
}
.container .main div:nth-child(5) {
background: orange;
transform: translateY(-100px) rotateX(90deg);
}
.container .main div:nth-child(6) {
background: gray;
transform: translateY(100px) rotateX(-90deg);
}
@keyframes play {
0% {
transform: rotateX(0deg), rotateY(0deg) rotateZ(0deg);
}
100% {
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
- 当
transform:rotate()在前面的时候，坐标轴发生变化，所以移动的也发生变化。
代码主要部分
.container .main div:first-child{
background: #f00;
transform: translateZ(100px);
}
.container .main div:nth-child(2){
background: #0f0;
transform: translateZ(-100px);
}
.container .main div:nth-child(3){
background: #00f;
transform: rotateY(-90deg) translateZ(100px);
}
.container .main div:nth-child(4){
background: yellow;
transform: rotateY(90deg) translateZ(100px);
}
.container .main div:nth-child(5){
background: orange;
transform: rotateX(90deg) translateZ(100px);
}
.container .main div:nth-child(6){
background: gray;
transform: rotateX(-90deg) translateZ(100px);
}
查看效果图
![]()
demo预览图
demo预览图
运用二，实现3d的图片旋转
3d旋转
思路分析
- 把所有的照片都定位到一个区域。
- 确定有多少张照片，如事例中的8张照片，每一张照片所占有的度数360/9
- 旋转一定度数后，然后分别向外部扩散一定的距离。
距离的计算
父元素的width: 210px算出元素需要向外部扩散的距离，图中的r
距离计算
<div class="container">
黄楚才
<div class="carousel">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
</div>
* {
margin: 0px;
padding: 0px;
}
li {
list-style-type: none;
}
.container {
width: 300px;
height: 200px;
background: #000;
position: relative;
perspective: 1000px;
margin: 100px auto;
box-shadow: 2 2 15 0 rgba(0,0,0,0.5);
line-height: 200px;
text-align: center;
color: #fff;
font-size: 50px;
}
.carousel {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
animation: play 10s infinite linear;
}
.carousel>ul>li {
position: absolute;
margin: 0;
display: block;
position: absolute;
width: 300px;
height: 200px;
left: 10px;
top: 10px;
border: 2px solid black;
background: rgba(255,255,255,0.8);
line-height: 200px;
text-align: center;
color: #abcdef;
font-size: 50px;
opacity: 0.5
box-shadow: 0 0 0 5 rbga(0,0,0,0.5);
}
.carousel>ul>li:first-child {
transform: rotateY(0deg) translateZ(550PX);
}
.carousel>ul>li:nth-child(2) {
transform: rotateY(40deg) translateZ(550PX);
}
.carousel>ul>li:nth-child(3) {
transform: rotateY(80deg) translateZ(550PX);
}
.carousel>ul>li:nth-child(4) {
transform: rotateY(120deg) translateZ(550PX);
}
.carousel>ul>li:nth-child(5) {
transform: rotateY(160deg) translateZ(550PX);
}
.carousel>ul>li:nth-child(6) {
transform: rotateY(200deg) translateZ(550PX);
}
.carousel>ul>li:nth-child(7) {
transform: rotateY(240deg) translateZ(550PX);
}
.carousel>ul>li:nth-child(8){
transform: rotateY(280deg) translateZ(550PX);
}
.carousel>ul>li:nth-child(9){
transform: rotateY(320deg) translateZ(550PX);
}
@keyframes play{
0% {transform: rotateY(0deg);}
100% {transform: rotateY(360deg);}
}
查看demo
设置代码的顺序
-
transform-style: preserve-3d;属性一般设置在要动的容器上面 - perspective属性有两种书写形式，一种用在3d元素父亲上；第二种就是用在当前3d元素上。
.ct {
perspective: 200px;
}
或者
.ct .box{
transform: perspective(200px) rotateY(45deg);
}
