css3 視距-perspective

時間 2019-12-05

標籤 css3 css 視距 perspective 欄目 CSS 简体版

原文原文鏈接

視距-用來設置用戶與元素3d空間Z平面之間的距離。ide

實例1：url

HTML：spa

 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：.net

 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:3d

鼠標放到圖片上面來查看效果哦！(圖片反轉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平面距離越遠，視覺效果就越小

點擊編輯在線源代碼-查看效果code

實例2：orm

HTML：blog

 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：three

 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空間變化

perspective值爲200px的效果以下：此值越小，角度出現的越近，從而建立一個高強度的角度和一個大型3D變化。

實例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空間變化

實例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;背面不可見

背面可見，在2，3，6方塊設置backface-visibility:visible;

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。