使用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属性结合起来使用，以便将视点移至元素的中心以外位置。

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style>

             .contain {

                 position: relative;

                 margin:  auto;

                 width: 150px;

                 height: 570px;

             }

             .door {

                 perspective-origin: top right;

                 position: absolute;

                 transform: perspective(600px) rotateY(-50deg);

                 transform-origin: left;

                 animation: open 1s ease-in-out infinite;

                 -webkit-animation: open 4s ease-in-out infinite;

             }

             .front {

                 backface-visibility: hidden;

                 -webkit-backface-visibility: hidden;

                 /*z-index: 2;*/

             }

             @keyframes open{

                 %{

                     transform: perspective(600px) rotateY(145deg);

                 }

             }

         </style>

     </head>

     <body>

         <!--perspective(600px) 给元素本身设置

         perspective: 600px 给元素父级设置

         perspective-origin: top right;  设置观察角度-->

         <!--.svg 矢量图   用AI打开或浏览器-->

         <div class="contain">

             <img class="door back" src="img/doorback.svg" >

             <img class="door front" src="img/doorfront.svg" >

             <img class="door window" src="img/doorwindow.svg" >

         </div>

     </body>

 </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. MySQL使用root用户授权出现错误ERROR 1045 (28000) at line 2: Access denied for user 'root'@'%' (using password: YES)解决办法

    参考:https://blog.csdn.net/open_data/article/details/42873827 使用MySQL的root用户登录出现错误提示 ERROR 1045 (28000 ...

  2. Docker多主机网络

    网络术语概念 二层交换技术:工作在OSI七层网络模型的第二层,通过MAC地址进行帧转发 三层交换技术:也称为IP交换技术,工作在OSI七层网络模型的第三层,通过IP地址进行包转发.它解决了局域网中网段 ...

  3. 洛谷 P1181数列分段SectionI 【贪心】

    题目描述 对于给定的一个长度为NN的正整数数列A_iAi​,现要将其分成连续的若干段,并且每段和不超过MM(可以等于MM),问最少能将其分成多少段使得满足要求. 输入输出格式 输入格式: 第1行包含两 ...

  4. css学习_css复合选择器

    css复合选择器 a.交集选择器  (即...又...:选择器之间不能有空格) p.one{color:red;] b.并集选择器(中间由逗号隔开) p,div{color:red;} c.后代选择器 ...

  5. 线性素数筛 ACM-ICPC 2018 南京赛区网络预赛 J Sum

    https://www.jisuanke.com/contest/1555?view=challenges 题意: 题解:写完都没发现是个积性函数233 想法就是对x分解质因数,f(x)就是2^k,其 ...

  6. JavaScript面向对象之创建类和方法

    一,js使用函数来定义类而不是像别的编程语言一样通过关键字class来定义,通过类本身(this)和原型(prototype)来完成面对对象编程! 示例1, //创建ElectronicSignatu ...

  7. iOS中Block的用法，举例，解析与底层原理（这可能是最详细的Block解析）

    1. 前言 Block:带有自动变量(局部变量)的匿名函数.它是C语言的扩充功能.之所以是拓展,是因为C语言不允许存在这样匿名函数. 1.1 匿名函数 匿名函数是指不带函数名称函数.C语言中,函数是怎 ...

  8. [development][dpdk][hugepage] 为不同的结点分配不同大小的大页内存

    这个事来自dpdk, 所以, 先参考. http://dpdk.org/doc/guides/linux_gsg/sys_reqs.html 当前, 假设你已经读过上边内容, 知道大页内存时候, dp ...

  9. Hash算法解决冲突的方法

    https://blog.csdn.net/feinik/article/details/54974293 Hash算法解决冲突的方法一般有以下几种常用的解决方法1, 开放定址法:所谓的开放定址法就是 ...

  10. 转：Eclipse快捷键和实用技巧

    原文地址:Eclipse快捷键和实用技巧 工欲善其事,必先利其器.对于程序员来说,Eclipse便是其中的一个“器”.本文会从Eclipse快捷键和实用技巧这两个篇章展开介绍.Eclipse快捷键用熟 ...