zoukankan      html  css  js  c++  java
  • css3 视距-perspective

           视距-用来设置用户与元素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
    2
    3
    4
    5
    6

     感谢-空智

  • 相关阅读:
    阿里DatatX mysql8往 Elasticsearch 7 插入时间数据 时区引发的问题
    通俗易懂 k8s (3):kubernetes 服务的注册与发现
    ReplicaSet 和 ReplicationController 的区别
    使用Go module导入本地包
    k8s之statefulset控制器
    终于成功部署 Kubernetes HPA 基于 QPS 进行自动伸缩
    Atitit drmmr outline org stat vb u33.docx Atitit drmmr outline org stat v0 taf.docx Atitit drmmr out
    Atitit all diary index va u33 #alldiary.docx Atitit alldiaryindex v1 t717 目录 1. Fix 1 2. Diary deta
    Atitit path query 路径查询语言 数据检索语言 目录 1.1. List map >> spel 1 1.2. Html数据 》》Css选择符 1 1.3. Json 》map》
    Atitit prgrmlan topic--express lan QL query lan表达式语言 目录 1. 通用表达语言(CEL) 1 1.1. 8.2 功能概述 1 1.2. Ongl
  • 原文地址:https://www.cnblogs.com/qbzmy/p/5823625.html
Copyright © 2011-2022 走看看