css3 视距-perspective

       视距-用来设置用户与元素3d空间Z平面之间的距离。

实例1：

      HTML：

 <div class="perspective">
     <h3>鼠标放到图片上面来查看效果哦！(图片反转360度)</h3>
     <div class="container">
         <div class="inner">
             <div class="rotate">
                 <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
             </div>
         </div>
     </div>

     <h3>鼠标放到图片上面来查看效果哦！(图片反转360度--使用transform-style: preserve-3d;效果)，但是不使用perspective属性</h3>
     <div class="container">
         <div class="inner">
             <div class="rotate three-d">
                 <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
             </div>
         </div>
     </div>

     <h3>鼠标放到图片上面来查看效果哦！(图片反转360度--使用transform-style: preserve-3d;效果)，使用perspective属性且值为100px，值越小，用户与3D空间z平面距离越近</h3>
     <div class="container">
         <div class="inner">
             <div class="rotate three-d rotate2">
                 <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
             </div>
         </div>
     </div>

     <h3>鼠标放到图片上面来查看效果哦！(图片反转360度--使用transform-style: preserve-3d;效果)，使用perspective属性且值为200px,值越大，用户与3D空间z平面距离越远，视觉效果就越小</h3>
     <div class="container">
         <div class="inner">
             <div class="rotate three-d rotate3">
                 <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
             </div>
         </div>
     </div>

     <h3>鼠标放到图片上面来查看效果哦！(图片反转360度--使用transform-style: preserve-3d;效果)，使用perspective属性且值为400px,值越大，用户与3D空间z平面距离越远，视觉效果就越小</h3>
     <div class="container">
         <div class="inner">
             <div class="rotate three-d rotate4">
                 <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
             </div>
         </div>
     </div>
     </div>

CSS：

 .perspective .container {
         width:500px;
         height:300px;
         margin:10px auto;
         position:relative;
     }
     .perspective .inner {
         width:142px;
         height:200px;
         position:absolute;
     }
     @keyframes inner2{
         0%{
             transform:rotateY(0deg)
         }
         100%{
             transform:rotateY(360deg)
         }
     }
     .perspective .inner:hover{
         animation:inner2 5s linear infinite;
     }

     .perspective .rotate {
         background: url("http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg") no-repeat center;
         border: 5px solid hsla(50,50%,50%,.9);
         transform: rotateY(45deg);
     }
     .perspective .rotate img{
         border: 1px solid green;
         transform: rotateX(15deg) translateZ(10px);
         transform-origin: 0 0 40px;
     }
     .perspective .three-d {
          transform-style: preserve-3d;
     }
     .perspective .rotate2 {
         transform: perspective(150px) rotateY(45deg);
     }
     .perspective .rotate3 {
         transform: perspective(200px) rotateY(45deg);
     }
     .perspective .rotate4 {
         transform: perspective(400px) rotateY(45deg);
     }

演示demo:

鼠标放到图片上面来查看效果哦！(图片反转360度)

鼠标放到图片上面来查看效果哦！(图片反转360度--使用transform-style: preserve-3d;效果)，但是不使用perspective属性

鼠标放到图片上面来查看效果哦！(图片反转360度--使用transform-style: preserve-3d;效果)，使用perspective属性且值为100px，值越小，用户与3D空间z平面距离越近

鼠标放到图片上面来查看效果哦！(图片反转360度--使用transform-style: preserve-3d;效果)，使用perspective属性且值为200px,值越大，用户与3D空间z平面距离越远，视觉效果就越小

鼠标放到图片上面来查看效果哦！(图片反转360度--使用transform-style: preserve-3d;效果)，使用perspective属性且值为400px,值越大，用户与3D空间z平面距离越远，视觉效果就越小

点击编辑在线源代码-查看效果

实例2：

HTML：

     <div class="perspective-nd">
         <h3>perspective值为1000px的效果如下：perspective: 1000px;该值越大，角度出现的越远，相当低的强度和非常小的3D空间变化</h3>
         <div class = "container">
             <div class="inner">
                 <div class="side front">1</div>
                 <div class="side back">2</div>
                 <div class="side right">3</div>
                 <div class="side left">4</div>
                 <div class="side top">5</div>
                 <div class="side bottom">6</div>
             </div>
         </div>
         <h3>perspective值为200px的效果如下：此值越小，角度出现的越近，从而创建一个高强度的角度和一个大型3D变化。</h3>
         <div class = "container">
             <div class="inner inner2">
                 <div class="side front">1</div>
                 <div class="side back">2</div>
                 <div class="side right">3</div>
                 <div class="side left">4</div>
                 <div class="side top">5</div>
                 <div class="side bottom">6</div>
             </div>
         </div>
     </div>

CSS：

     .perspective-nd .container {
         width:500px;
         height:300px;
         margin:10px auto;
         position:relative;
     }
     .perspective-nd .inner {
         font-size: 4em;
         width: 2em;
         margin: 1.5em auto;
         transform-style: preserve-3d;
         transform: rotateX(-20deg) rotateY(32deg);
         perspective: 1000px;
     }
     .perspective-nd .side {
         position: absolute;
         width: 2em;
         height: 2em;
         background: rgba(255, 99, 71, 0.6);
         border: 1px solid rgba(0, 0, 0, 0.5);
         color: white;
         text-align: center;
         line-height: 2em;
     }
     .perspective-nd .front {
         transform: translateZ(1em);
     }
     .perspective-nd .top {
         transform: rotateX(90deg) translateZ(1em);
     }
     .perspective-nd .right {
         transform: rotateY(90deg) translateZ(1em);
     }
     .perspective-nd .left {
         transform: rotateY(-90deg) translateZ(1em);
     }
     .perspective-nd .bottom {
         transform: rotateX(-90deg) translateZ(1em);
     }

     .perspective-nd .back {
         transform: rotateY(-180deg) translateZ(1em);
     }
     .perspective-nd .inner2 {
         perspective: 200px;
     }

perspective值为1000px的效果如下：perspective: 1000px;该值越大，角度出现的越远，相当低的强度和非常小的3D空间变化

1

2

3

4

5

6

perspective值为200px的效果如下：此值越小，角度出现的越近，从而创建一个高强度的角度和一个大型3D变化。

1

2

3

4

5

6

实例3：

HTML：

 <div class="perspective-origin">
     <h3>perspective值为1000px的效果如下：perspective: 1000px;该值越大，角度出现的越远，相当低的强度和非常小的3D空间变化</h3>
     <div class = "container">
         <div class="inner">
             <div class="side front">1</div>
             <div class="side back">2</div>
             <div class="side right">3</div>
             <div class="side left">4</div>
             <div class="side top">5</div>
             <div class="side bottom">6</div>
         </div>
     </div>
 </div>

CSS：

 .perspective-origin .container {
         width:500px;
         height:300px;
         margin:10px auto;
         position:relative;
     }
     .perspective-origin .inner {
         font-size: 4em;
         width: 2em;
         margin: 1.5em auto;
         transform-style: preserve-3d;
         transform: rotateX(-20deg) rotateY(32deg);
         perspective: 1000px;
         animation: move-origin infinite 2s;
     }
     .perspective-origin .side {
         position: absolute;
         width: 2em;
         height: 2em;
         background: rgba(255, 99, 71, 0.6);
         border: 1px solid rgba(0, 0, 0, 0.5);
         color: white;
         text-align: center;
         line-height: 2em;
     }
     .perspective-origin .front {
         transform: translateZ(1em);
     }
     .perspective-origin .top {
         transform: rotateX(90deg) translateZ(1em);
     }
     .perspective-origin .right {
         transform: rotateY(90deg) translateZ(1em);
     }
     .perspective-origin .left {
         transform: rotateY(-90deg) translateZ(1em);
     }
     .perspective-origin .bottom {
         transform: rotateX(-90deg) translateZ(1em);
     }

     .perspective-origin .back {
         transform: rotateY(-180deg) translateZ(1em);
     }
     @keyframes move-origin {
       0% {
         perspective-origin: 0%  0%;
       }
       25% {
         perspective-origin: 100%  0%;
       }
       50% {
         perspective-origin: 100% 100%;
       }
       75% {
         perspective-origin: 0%  100%;
       }
       100% {
         perspective-origin: 0%   0%;
       }
     }

演示demo:

perspective值为1000px的效果如下：perspective: 1000px;该值越大，角度出现的越远，相当低的强度和非常小的3D空间变化

1

2

3

4

5

6

实例4：

backface-visibility属性决定元素旋转背面是否可见，对于未旋转的元素，该元素是正面面向我们的，但是当其Y轴旋转约180度时会导致元素的背面面对观众。
backface-visibility基本语法如下：
backface-visibility: visible | hidden
visible含义是：为backface-visibility的默认值，表示反面可见
hidden含义是：表示反面不可见。
backface-visibility属性可用于隐藏内容的背面。默认情况下，背面可见，这意味着即使在翻转后，旋转的内容仍然可见。但当backface-visibility设置为hidden时，旋转后内容将隐藏，因为旋转后正面将不再可见。

HTML：

 <div class="backface-visibility">
         <h3>backface-visibility:hidden;背面不可见</h3>
         <div class = "container">
             <div class="inner">
                 <div class="side front">1</div>
                 <div class="side back">2</div>
                 <div class="side right">3</div>
                 <div class="side left">4</div>
                 <div class="side top">5</div>
                 <div class="side bottom">6</div>
             </div>
         </div>

         <h3>背面可见，在2，3，6方块设置backface-visibility:visible;</h3>
         <div class = "container">
             <div class="inner">
                 <div class="side front">1</div>
                 <div class="side back slide2">2</div>
                 <div class="side right slide2">3</div>
                 <div class="side left">4</div>
                 <div class="side top">5</div>
                 <div class="side bottom slide2">6</div>
             </div>
         </div>
     </div>

CSS：

 .backface-visibility .container {
         width:500px;
         height:300px;
         margin:10px auto;
         position:relative;
     }
     .backface-visibility .inner {
         font-size: 4em;
         width: 2em;
         margin: 1.5em auto;
         transform-style: preserve-3d;
         transform: rotateX(-20deg) rotateY(32deg);
         perspective: 1000px;
         animation: move-origin33 infinite 2s;
     }
     .backface-visibility .side {
         position: absolute;
         width: 2em;
         height: 2em;
         background: rgba(255, 99, 71, 0.6);
         border: 1px solid rgba(0, 0, 0, 0.5);
         color: white;
         text-align: center;
         line-height: 2em;
         backface-visibility:hidden;
     }
     .backface-visibility .front {
         transform: translateZ(1em);
     }
     .backface-visibility .top {
         transform: rotateX(90deg) translateZ(1em);
     }
     .backface-visibility .right {
         transform: rotateY(90deg) translateZ(1em);
     }
     .backface-visibility .left {
         transform: rotateY(-90deg) translateZ(1em);
     }
     .backface-visibility .bottom {
         transform: rotateX(-90deg) translateZ(1em);
     }

     .backface-visibility .back {
         transform: rotateY(-180deg) translateZ(1em);
     }
     @keyframes move-origin33 {
       0% {
         perspective-origin: 0%  0%;
       }
       25% {
         perspective-origin: 100%  0%;
       }
       50% {
         perspective-origin: 100% 100%;
       }
       75% {
         perspective-origin: 0%  100%;
       }
       100% {
         perspective-origin: 0%   0%;
       }
     }
     .backface-visibility  .slide2 {
         backface-visibility:visible;
     }

演示demo:

backface-visibility:hidden;背面不可见

1

2

3

4

5

6

背面可见，在2，3，6方块设置backface-visibility:visible;

1

2

3

4

5

6

感谢-空智