使用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:  auto;
  10.                  width: 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.              .front {
  25.                  backface-visibility: hidden;
  26.                  -webkit-backface-visibility: hidden;
  27.                  /*z-index: 2;*/
  28.              }
  29.  
  30.              @keyframes open{
  31.  
  32.                  %{
  33.                      transform: perspective(600px) rotateY(145deg);
  34.                  }
  35.              }
  36.          </style>
  37.      </head>
  38.      <body>
  39.  
  40.          <!--perspective(600px) 给元素本身设置
  41.          perspective: 600px 给元素父级设置
  42.          perspective-origin: top right;  设置观察角度-->
  43.  
  44.          <!--.svg 矢量图   用AI打开或浏览器-->
  45.          <div class="contain">
  46.  
  47.              <img class="door back" src="img/doorback.svg" >
  48.  
  49.              <img class="door front" src="img/doorfront.svg" >
  50.  
  51.              <img class="door window" src="img/doorwindow.svg" >
  52.  
  53.          </div>
  54.      </body>
  55.  </html>

css3--之backface-visibility的更多相关文章

  1. CSS 3 学习——transform 3D转换渲染

    以下内容根据官方规范翻译,没有翻译关于SVG变换的内容和关于矩阵计算的内容. 一般情况下,元素在一个无景深无立体感的平面(flat plane)上渲染,这个平面就是其包含块所处的平面.同时,页面上的其 ...

  2. mcake活动维护常见问题记录【pc端】 ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★

    ★ ★ ★ ★ ★ ★ ★ ★ ★ ★pc端问题及解决方法 ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ 问题一.pc.弹窗,背景兼容ie8的写法 ;;; -moz-opacity:.7;f ...

  3. 总结30个CSS3选择器

    或许大家平时总是在用的选择器都是:#id  .class  以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 ;; ...

  4. 【Web动画】CSS3 3D 行星运转 && 浏览器渲染原理

    承接上一篇:[CSS3进阶]酷炫的3D旋转透视 . 最近入坑 Web 动画,所以把自己的学习过程记录一下分享给大家. CSS3 3D 行星运转 demo 页面请戳:Demo.(建议使用Chrome打开 ...

  5. HTML5移动开发学习笔记之CSS3基础学习

    CSS回顾 在学CSS3之前首先巩固下CSS的基础知识. 1.CSS框模型 举例子: #box { width: 70px; margin: 10px; padding: 5px; } 这个代码将出现 ...

  6. CSS3与页面布局学习总结（二）——Box Model、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  7. 纯CSS3实现动态导航栏目

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 总结30个CSS3选择器（转载）

    或许大家平时总是在用的选择器都是:#id  .class  以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 * ...

  9. css3中transition和display的坑

    不知道大家做css3动画的时候遇到过这种情景没? 用opacity实现淡入淡出的效果.噢!good!一切正常 给个栗子: <!DOCTYPE html> <html> < ...

  10. 用CSS3动画特效实现弹窗效果

    提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了.效果查看: https://heavis.github.io/hidialog/index.h ...

随机推荐

  1. Redhat7.5安装glusterfs4

    redhat7.5自带yum源不包含glusterfs4,下面通过rpm包的方式安装glusterfs4 环境查看 glusterfs官方网站下载rpm包下载地址 https://buildlogs. ...

  2. Ubuntu上pip安装uwsgi失败的原因之一（未联网）

    ubuntu@ubuntu:~$ sudo pip install uwsgi 报错:The directory '/home/ubuntu/.cache/pip/http' or its paren ...

  3. 使用介质设备安装 AIX 以通过 HMC 安装分区

    使用介质设备安装 AIX 以通过 HMC 安装分区 原文:https://www.ibm.com/support/knowledgecenter/zh/ssw_aix_72/com.ibm.aix.h ...

  4. vins-mono源码解读

    https://blog.csdn.net/q597967420/article/details/76099409

  5. 1.7Oob 方法体中的循环也能也能返回值给方法

    public String monthString(int monthNumber){ switch(monthNumber){ case 1: return "january"; ...

  6. app相关的一些网站

    https://www.qimai.cn   排名排行关键字原aso100

  7. cocoa开发Mac小试笔记

    急需纠正自己的错误认识,Mac开发和iOS开发UI显示.事件交互.生命周期等存在极大的差距 首先点击事件NSButton和UIButton完全是两个不同的东西 列表UITableView和NSTabl ...

  8. PostgreSQL+PostGIS安装以及使用

    安装,参照:    https://www.cnblogs.com/ytwy/p/6817179.html 创建企业级地理文件数据库时报错," You must copy the lates ...

  9. beginner’s mistake

    PHP Advanced and Object-Oriented Programming 3rd Edition Related to modularity is abstraction: class ...

  10. mail 发送email

    (一)首先安装ssmpt和mailutils: sudo apt-get install ssmtp mailutils (二)接下来编辑配置文件sudo gedit /etc/ssmtp/ssmtp ...