css3 transform和perspective

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);
    }
}

查看demo

当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);
}

css3 transform和perspective

perspective的介绍

CSS3的transform

1.transform: rotate方向的详细

牢记一点，不管元素怎么旋转，顺时针的方向为正值。

查看demo

2.transform: translate元素移动的详细

查看demo

运用transform:translate() rotate()实现正方体

查看效果图

demo预览图

运用二，实现3d的图片旋转

思路分析

查看demo

设置代码的顺序

推荐阅读更多精彩内容

1.`transform: rotate`方向的详细

2.`transform: translate`元素移动的详细

运用`transform:translate() rotate()`实现正方体