zoukankan      html  css  js  c++  java
  • css3--之backface-visibility

    使用CSS3 backface-visibility属性制作翻转动画效果:    http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201504151686.html

    详解CSS3的perspective属性设置3D变换距离的方法: http://www.jb51.net/css/462429.html

    注意,为了指转换子元素变形的深度,perspective-origin属性必须定义父元素上。通常perspective-origin属性本身不做任何事情,它必须被定义在设置了perspective属性的元素上。换句话说,perspective-origin属性需要与perspective属性结合起来使用,以便将视点移至元素的中心以外位置。

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="UTF-8">
     5         <title></title>
     6         <style>
     7             .contain {
     8                 position: relative;
     9                 margin: 0 auto;
    10                  150px;
    11                 height: 570px;
    12             }
    13             
    14             .door {
    15                 perspective-origin: top right;  
    16                 position: absolute;
    17                 transform: perspective(600px) rotateY(-50deg);
    18                 transform-origin: left;
    19                 animation: open 1s ease-in-out infinite;
    20                 -webkit-animation: open 4s ease-in-out infinite;
    21                 
    22             }
    23             
    24             
    25             .front {
    26                 backface-visibility: hidden;
    27                 -webkit-backface-visibility: hidden;
    28                 /*z-index: 2;*/
    29             }
    30             
    31             @keyframes open{
    32                 
    33                 50%{
    34                     transform: perspective(600px) rotateY(145deg);
    35                 }
    36             }
    37         </style>
    38     </head>
    39     <body>
    40         
    41         <!--perspective(600px) 给元素本身设置
    42         perspective: 600px 给元素父级设置
    43         perspective-origin: top right;  设置观察角度-->
    44         
    45         <!--.svg 矢量图   用AI打开或浏览器-->
    46         <div class="contain">
    47     
    48             <img class="door back" src="img/doorback.svg" >
    49       
    50             <img class="door front" src="img/doorfront.svg" >
    51               
    52             <img class="door window" src="img/doorwindow.svg" >
    53            
    54         </div>
    55     </body>
    56 </html>
  • 相关阅读:
    idea自带的maven
    面试题汇总
    mybatis参数处理
    tips
    mybatis-config.xml
    helloWorld程序
    idea遇到的问题汇总
    PL/SQL批量执行SQL脚本文件
    Iframe跳转本地项目
    angular video播放问题
  • 原文地址:https://www.cnblogs.com/zuojiayi/p/7110942.html
Copyright © 2011-2022 走看看