野花大全在线观看免费高清,宝贝腿张开不许穿内裤,三男一女吃奶添下面视频

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

css3 transform和perspective

perspective的介紹

CSS3的transform

1.`transform: rotate`方向的詳細

牢記一點，不管元素怎么旋轉，順時針的方向為正值。

查看demo

2.`transform: translate`元素移動的詳細

查看demo

運用`transform:translate() rotate()`實現正方體

查看效果圖

demo預覽圖

運用二，實現3d的圖片旋轉

思路分析

查看demo

設置代碼的順序

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

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()`實現正方體