效果如图：

代码实现：

1.html：

    <div class="door">

        <div class="in"><div>

    </div>　

2.css：

设置父元素：

    .door{

            width:250px;

            height:170px;

            background-image:url(img/1.jpg);

            background-size:100% 100%;

            border:1px solid #000000;

            margin:100px auto;

            position:relative;

            perspective:1000px;

        }

设置子元素：

    .in{

            position:position;

            top:0;

            left:0;

            width:250px;

            height:170px;

            background-color:brown;

            transition:all 2s;

            transform-origin:top;

        }

3.鼠标点击时：

        .door:hover .in{

            transform:rotateX(120deg);

        }　

完整代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .door{

            width:250px;

            height:170px;

            background-image:url(img/1.jpg);

            background-size:100% 100%;

            border:1px solid #000000;

            margin:100px auto;

            position:relative;

            perspective:1000px;

        }

        .in{

            position:position;

            top:0;

            left:0;

            width:250px;

            height:170px;

            background-color:brown;

            transition:all 2s;

            transform-origin:top;

        }

        .door:hover .in{

            transform:rotateX(120deg);

        }

    </style>

</head>

<body>

    <div class="door">

        <div class="in"><div>

    </div>

</body>

</html>

注意：

父元素设置为相对定位，子元素设置为绝对定位。perspective（透视）属性设置在父元素上，才可对子元素起作用。

给谁设置3D转换鼠标点击事件就把过渡属性及3D转换后的位置（top,right,bottm,left）设置在谁上面。

 

参考博客：https://www.cnblogs.com/Assist/p/9684982.html

3D转换（位置）+过渡+透视的更多相关文章

  1. CSS3中2D/3D转换、过渡、动画

    转换.过渡.动画 2D 转换 1.translate() 方法 通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数: 实例 d ...

  2. CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)

    CSS3边框: 1.CSS3圆角:border-radius  属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...

  3. 常用到用css3实现的转换，过渡和动画

    为什么要用css动画替换js动画 导致JavaScript效率低的两大原因:操作DOM和使用页面动画. 通常我们会通过频繁的操作 DOM的CSS来实现视觉上的动画效果,导致js效率低的两个因素都包括在 ...

  4. CSS3 3D转换

    CSS3允许你使用3D转换来对元素进行格式化. 3D转换方法: rotateX() rotateY() 浏览器支持 属性 浏览器支持 transform           IE10和Firefox支 ...

  5. 3D转换

    CSS3 允许您使用 3D 转换来对元素进行格式化. 在本章中,您将学到其中的一些 3D 转换方法: 1. rotateX() 2. rotateY() <!DOCTYPE HTML>&l ...

  6. css3 2d转换3d转换以及动画的知识点汇总

    css3 2d转换 2d转换的方法: 1.移动 translate(x, y) 可以改变元素的位置,x.y可为负值: 2.缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放,x.y的取值 ...

  7. CSS笔记（十二）CSS3之2D和3D转换

    参考:http://www.w3school.com.cn/css3/css3_2dtransform.asp 2D Transform 方法 函数 描述 matrix(n,n,n,n,n,n) 定义 ...

  8. CSS自学笔记（13）:CSS3 2D/3D转换

    CSS3中新增了对元素进行2D和3D的转换效果,这样可以是开发人员很方便的做出视觉效果更好的网页来. 通过CSS3中属性的定义,我们可以对元素进行移动.缩放.拉伸.旋转等等,可以通过定义transfo ...

  9. CSS3 transform变形（3D转换）

    一.三维坐标 空间中三维坐标如下图所示: 向上为-Y,向下为+Y,向左为-X,向右为+X,向前为+Z,向后为-Z. 二.perspective(n)为 3D 转换元素定义透视视图 perspectiv ...

随机推荐

  1. Express static 托管静态文件 理解

    今天偶尔看了一下服务端渲染,遇到了express.static, 在以前学习webpack配置服务端渲染时,也使用express.static 中间件,两者配置不太一样,由于当时也没有认真学,所以 一 ...

  2. jQuery 方式模拟提交表单

    //add test moudle define(function(require , exports , module) { //=========== 不使用模块化只使用如下代码即可 start ...

  3. 使用树莓派 Raspberry Pi 播放豆瓣 FM

    安装 mplayersudo apt-get install mplayer 安装 Python-pipsudo apt-get install python-pip 通过 python-pip 安装 ...

  4. Java 枚举 的学习

    在JDK5.0之后,引进了一种与C语言相通的枚举类型. 所谓枚举类型就是指含有一组具有固定值, 并且容量有限的数据集合. 例如,定义一个星期的枚举类型, 从周一到周日是具有固定大小和固定值的集合 pu ...

  5. C++类相关

    本文打算通过一些小例子来说明几个关键的知识点. 一:成员函数相关 #include <iostream> using namespace std; class D { public: vo ...

  6. TJOI2011书架(dp)

    当农夫约翰闲的没事干的时候,他喜欢坐下来看书.多年过去,他已经收集了 N 本书 (1 <= N <= 100,000), 他想造一个新的书架来装所有书. 每本书 i 都有宽度 W(i) 和 ...

  7. 利用httpd配置虚拟目录创建下载站点

    应用环境:通常放置一些文件来提供下载. 配置环境:centos7 //已经关闭Selinux和Firewall 需求假设:在网页输入主机IP并进入,会显示主机目录/home/share/的文件以提供下 ...

  8. poj1182、hdu1829（并查集）

    题目链接:http://poj.org/problem?id=1182 食物链 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: ...

  9. Typescript学习笔记（三）变量声明及作用域

    ts的变量声明有var,let和const,这尼玛完全跟es6一样嘛.就稍微介绍一下. 大多数js开发者对于var很熟悉了,原生js里没有块级作用域,只有函数作用域和全局作用域,还存在var的变量提升 ...

  10. Java 验证代理ip

    原文地址:http://www.cnblogs.com/junrong624/p/5416503.html 1 import java.io.IOException; import java.io.I ...