视距-用来设置用户与元素3d空间Z平面之间的距离。
实例1：
HTML：
1 <div class="perspective"> 2 <h3>鼠标放到图片上面来查看效果哦！(图片反转360度)</h3> 3 <div class="container"> 4 <div class="inner"> 5 <div class="rotate"> 6 <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" /> 7 </div> 8 </div> 9 </div> 10 11 <h3>鼠标放到图片上面来查看效果哦！(图片反转360度--使用transform-style: preserve-3d;效果)，但是不使用perspective属性</h3> 12 <div class="container"> 13 <div class="inner"> 14 <div class="rotate three-d"> 15 <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" /> 16 </div> 17 </div> 18 </div> 19 20 <h3>鼠标放到图片上面来查看效果哦！(图片反转360度--使用transform-style: preserve-3d;效果)，使用perspective属性且值为100px，值越小，用户与3D空间z平面距离越近</h3> 21 <div class="container"> 22 <div class="inner"> 23 <div class="rotate three-d rotate2"> 24 <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" /> 25 </div> 26 </div> 27 </div> 28 29 <h3>鼠标放到图片上面来查看效果哦！(图片反转360度--使用transform-style: preserve-3d;效果)，使用perspective属性且值为200px,值越大，用户与3D空间z平面距离越远，视觉效果就越小</h3> 30 <div class="container"> 31 <div class="inner"> 32 <div class="rotate three-d rotate3"> 33 <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" /> 34 </div> 35 </div> 36 </div> 37 38 <h3>鼠标放到图片上面来查看效果哦！(图片反转360度--使用transform-style: preserve-3d;效果)，使用perspective属性且值为400px,值越大，用户与3D空间z平面距离越远，视觉效果就越小</h3> 39 <div class="container"> 40 <div class="inner"> 41 <div class="rotate three-d rotate4"> 42 <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" /> 43 </div> 44 </div> 45 </div> 46 </div>
CSS：
1 .perspective .container { 2 width:500px; 3 height:300px; 4 margin:10px auto; 5 position:relative; 6 } 7 .perspective .inner { 8 width:142px; 9 height:200px; 10 position:absolute; 11 } 12 @keyframes inner2{ 13 0%{ 14 transform:rotateY(0deg) 15 } 16 100%{ 17 transform:rotateY(360deg) 18 } 19 } 20 .perspective .inner:hover{ 21 animation:inner2 5s linear infinite; 22 } 23 24 .perspective .rotate { 25 background: url("http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg") no-repeat center; 26 border: 5px solid hsla(50,50%,50%,.9); 27 transform: rotateY(45deg); 28 } 29 .perspective .rotate img{ 30 border: 1px solid green; 31 transform: rotateX(15deg) translateZ(10px); 32 transform-origin: 0 0 40px; 33 } 34 .perspective .three-d { 35 transform-style: preserve-3d; 36 } 37 .perspective .rotate2 { 38 transform: perspective(150px) rotateY(45deg); 39 } 40 .perspective .rotate3 { 41 transform: perspective(200px) rotateY(45deg); 42 } 43 .perspective .rotate4 { 44 transform: perspective(400px) rotateY(45deg); 45 }
演示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：
1 <div class="perspective-nd"> 2 <h3>perspective值为1000px的效果如下：perspective: 1000px;该值越大，角度出现的越远，相当低的强度和非常小的3D空间变化</h3> 3 <div class = "container"> 4 <div class="inner"> 5 <div class="side front">1</div> 6 <div class="side back">2</div> 7 <div class="side right">3</div> 8 <div class="side left">4</div> 9 <div class="side top">5</div> 10 <div class="side bottom">6</div> 11 </div> 12 </div> 13 <h3>perspective值为200px的效果如下：此值越小，角度出现的越近，从而创建一个高强度的角度和一个大型3D变化。</h3> 14 <div class = "container"> 15 <div class="inner inner2"> 16 <div class="side front">1</div> 17 <div class="side back">2</div> 18 <div class="side right">3</div> 19 <div class="side left">4</div> 20 <div class="side top">5</div> 21 <div class="side bottom">6</div> 22 </div> 23 </div> 24 </div>
CSS：
1 .perspective-nd .container { 2 width:500px; 3 height:300px; 4 margin:10px auto; 5 position:relative; 6 } 7 .perspective-nd .inner { 8 font-size: 4em; 9 width: 2em; 10 margin: 1.5em auto; 11 transform-style: preserve-3d; 12 transform: rotateX(-20deg) rotateY(32deg); 13 perspective: 1000px; 14 } 15 .perspective-nd .side { 16 position: absolute; 17 width: 2em; 18 height: 2em; 19 background: rgba(255, 99, 71, 0.6); 20 border: 1px solid rgba(0, 0, 0, 0.5); 21 color: white; 22 text-align: center; 23 line-height: 2em; 24 } 25 .perspective-nd .front { 26 transform: translateZ(1em); 27 } 28 .perspective-nd .top { 29 transform: rotateX(90deg) translateZ(1em); 30 } 31 .perspective-nd .right { 32 transform: rotateY(90deg) translateZ(1em); 33 } 34 .perspective-nd .left { 35 transform: rotateY(-90deg) translateZ(1em); 36 } 37 .perspective-nd .bottom { 38 transform: rotateX(-90deg) translateZ(1em); 39 } 40 41 .perspective-nd .back { 42 transform: rotateY(-180deg) translateZ(1em); 43 } 44 .perspective-nd .inner2 { 45 perspective: 200px; 46 }
perspective值为1000px的效果如下：perspective: 1000px;该值越大，角度出现的越远，相当低的强度和非常小的3D空间变化
1
2
3
4
5
6
perspective值为200px的效果如下：此值越小，角度出现的越近，从而创建一个高强度的角度和一个大型3D变化。
1
2
3
4
5
6
实例3：
HTML：
1 <div class="perspective-origin"> 2 <h3>perspective值为1000px的效果如下：perspective: 1000px;该值越大，角度出现的越远，相当低的强度和非常小的3D空间变化</h3> 3 <div class = "container"> 4 <div class="inner"> 5 <div class="side front">1</div> 6 <div class="side back">2</div> 7 <div class="side right">3</div> 8 <div class="side left">4</div> 9 <div class="side top">5</div> 10 <div class="side bottom">6</div> 11 </div> 12 </div> 13 </div>
CSS：
1 .perspective-origin .container { 2 width:500px; 3 height:300px; 4 margin:10px auto; 5 position:relative; 6 } 7 .perspective-origin .inner { 8 font-size: 4em; 9 width: 2em; 10 margin: 1.5em auto; 11 transform-style: preserve-3d; 12 transform: rotateX(-20deg) rotateY(32deg); 13 perspective: 1000px; 14 animation: move-origin infinite 2s; 15 } 16 .perspective-origin .side { 17 position: absolute; 18 width: 2em; 19 height: 2em; 20 background: rgba(255, 99, 71, 0.6); 21 border: 1px solid rgba(0, 0, 0, 0.5); 22 color: white; 23 text-align: center; 24 line-height: 2em; 25 } 26 .perspective-origin .front { 27 transform: translateZ(1em); 28 } 29 .perspective-origin .top { 30 transform: rotateX(90deg) translateZ(1em); 31 } 32 .perspective-origin .right { 33 transform: rotateY(90deg) translateZ(1em); 34 } 35 .perspective-origin .left { 36 transform: rotateY(-90deg) translateZ(1em); 37 } 38 .perspective-origin .bottom { 39 transform: rotateX(-90deg) translateZ(1em); 40 } 41 42 .perspective-origin .back { 43 transform: rotateY(-180deg) translateZ(1em); 44 } 45 @keyframes move-origin { 46 0% { 47 perspective-origin: 0% 0%; 48 } 49 25% { 50 perspective-origin: 100% 0%; 51 } 52 50% { 53 perspective-origin: 100% 100%; 54 } 55 75% { 56 perspective-origin: 0% 100%; 57 } 58 100% { 59 perspective-origin: 0% 0%; 60 } 61 }
演示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：
1 <div class="backface-visibility"> 2 <h3>backface-visibility:hidden;背面不可见</h3> 3 <div class = "container"> 4 <div class="inner"> 5 <div class="side front">1</div> 6 <div class="side back">2</div> 7 <div class="side right">3</div> 8 <div class="side left">4</div> 9 <div class="side top">5</div> 10 <div class="side bottom">6</div> 11 </div> 12 </div> 13 14 <h3>背面可见，在2，3，6方块设置backface-visibility:visible;</h3> 15 <div class = "container"> 16 <div class="inner"> 17 <div class="side front">1</div> 18 <div class="side back slide2">2</div> 19 <div class="side right slide2">3</div> 20 <div class="side left">4</div> 21 <div class="side top">5</div> 22 <div class="side bottom slide2">6</div> 23 </div> 24 </div> 25 </div>
CSS：
1 .backface-visibility .container { 2 width:500px; 3 height:300px; 4 margin:10px auto; 5 position:relative; 6 } 7 .backface-visibility .inner { 8 font-size: 4em; 9 width: 2em; 10 margin: 1.5em auto; 11 transform-style: preserve-3d; 12 transform: rotateX(-20deg) rotateY(32deg); 13 perspective: 1000px; 14 animation: move-origin33 infinite 2s; 15 } 16 .backface-visibility .side { 17 position: absolute; 18 width: 2em; 19 height: 2em; 20 background: rgba(255, 99, 71, 0.6); 21 border: 1px solid rgba(0, 0, 0, 0.5); 22 color: white; 23 text-align: center; 24 line-height: 2em; 25 backface-visibility:hidden; 26 } 27 .backface-visibility .front { 28 transform: translateZ(1em); 29 } 30 .backface-visibility .top { 31 transform: rotateX(90deg) translateZ(1em); 32 } 33 .backface-visibility .right { 34 transform: rotateY(90deg) translateZ(1em); 35 } 36 .backface-visibility .left { 37 transform: rotateY(-90deg) translateZ(1em); 38 } 39 .backface-visibility .bottom { 40 transform: rotateX(-90deg) translateZ(1em); 41 } 42 43 .backface-visibility .back { 44 transform: rotateY(-180deg) translateZ(1em); 45 } 46 @keyframes move-origin33 { 47 0% { 48 perspective-origin: 0% 0%; 49 } 50 25% { 51 perspective-origin: 100% 0%; 52 } 53 50% { 54 perspective-origin: 100% 100%; 55 } 56 75% { 57 perspective-origin: 0% 100%; 58 } 59 100% { 60 perspective-origin: 0% 0%; 61 } 62 } 63 .backface-visibility .slide2 { 64 backface-visibility:visible; 65 }
演示demo:
backface-visibility:hidden;背面不可见
1
2
3
4
5
6
背面可见，在2，3，6方块设置backface-visibility:visible;
1
4
5