3D转换（位置）+过渡+透视
效果如图：
代码实现：
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转换（位置）+过渡+透视的更多相关文章
- CSS3中2D/3D转换、过渡、动画
转换.过渡.动画 2D 转换 1.translate() 方法 通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数: 实例 d ...
- CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)
CSS3边框: 1.CSS3圆角:border-radius 属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...
- 常用到用css3实现的转换，过渡和动画
为什么要用css动画替换js动画 导致JavaScript效率低的两大原因:操作DOM和使用页面动画. 通常我们会通过频繁的操作 DOM的CSS来实现视觉上的动画效果,导致js效率低的两个因素都包括在 ...
- CSS3 3D转换
CSS3允许你使用3D转换来对元素进行格式化. 3D转换方法: rotateX() rotateY() 浏览器支持 属性 浏览器支持 transform IE10和Firefox支 ...
- 3D转换
CSS3 允许您使用 3D 转换来对元素进行格式化. 在本章中,您将学到其中的一些 3D 转换方法: 1. rotateX() 2. rotateY() <!DOCTYPE HTML>&l ...
- css3 2d转换3d转换以及动画的知识点汇总
css3 2d转换 2d转换的方法: 1.移动 translate(x, y) 可以改变元素的位置,x.y可为负值: 2.缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放,x.y的取值 ...
- CSS笔记（十二）CSS3之2D和3D转换
参考:http://www.w3school.com.cn/css3/css3_2dtransform.asp 2D Transform 方法 函数 描述 matrix(n,n,n,n,n,n) 定义 ...
- CSS自学笔记（13）:CSS3 2D/3D转换
CSS3中新增了对元素进行2D和3D的转换效果,这样可以是开发人员很方便的做出视觉效果更好的网页来. 通过CSS3中属性的定义,我们可以对元素进行移动.缩放.拉伸.旋转等等,可以通过定义transfo ...
- CSS3 transform变形（3D转换）
一.三维坐标 空间中三维坐标如下图所示: 向上为-Y,向下为+Y,向左为-X,向右为+X,向前为+Z,向后为-Z. 二.perspective(n)为 3D 转换元素定义透视视图 perspectiv ...
随机推荐
- hdu-1058（map)
题意:输出第n个能拆分成由,2,3,5,7中的一个或者多个组成的数: 解题思路:a[i+1]=a[i]*2;a[i+2]=a[i]*3;a[i+3]=a[i]*5;a[i+4]=a[i]*7;然后把重 ...
- 使用脚本调用maven命令后脚本直接退出问题
在带有maven命令的bat脚本执行的时候,执行完一个mvn 目标后会自动退出,pause命令也无效. 原因:mvn本身是一个bat命令,因此在exit退出的时候,整个脚本进程将退出,加入call命令 ...
- Tomcat的四种web应用部署方式详解
在Tomcat中有四种部署Web应用的方式,简要的概括分别是: (1)利用Tomcat自动部署 (2)利用控制台进行部署 (3)增加自定义的Web部署文件(%Tomcat_Home%\conf\Cat ...
- Codeforces478D-Red-Green Towers-DP
不是特别难的一道dp题. 给r个红块,g个绿块,计算这些块能磊出的最高塔的方案数. 塔的每一层都比上一层多一块,每一层只能有一种颜色. dp[i][j]表示第i层,j个红块的方案数. 则dp[i][j ...
- Python内建GUI模块Tkinter(一)
Python主窗口 Python特定的GUI界面,是一个图像的窗口,tkinter是python自带的,可以编辑的GUI界面,我们可以用GUI实现很多一个直观的功能,如何想开发一个计算器,如果只是一个 ...
- P1140 相似基因 最长公共子序列
思路 类似于最长公共子序列 把一段基因和另外一段基因匹配 不够长的用空基因替换 #include<bits/stdc++.h> using namespace std; const in ...
- kubernetes（一）
•Kubernetes介绍 1.背景介绍 云计算飞速发展 - IaaS - PaaS - SaaS Docker技术突飞猛进 - 一次构建,到处运行 - 容器的快速轻量 - 完整的生态环境 2.什 ...
- 【XSY2612】Comb Avoiding Trees 生成函数 多项式求逆 矩阵快速幂
题目大意 本题的满二叉树定义为:不存在只有一个儿子的节点的二叉树. 定义一棵满二叉树\(A\)包含满二叉树\(B\)当且经当\(A\)可以通过下列三种操作变成\(B\): 把一个节点的两个儿子同时删掉 ...
- WePY | 小程序组件化开发框架
资源连接: WePY | 小程序组件化开发框架 WePYAWESOME 微信小程序wepy开发资源汇总 文档 GITHUB weui WebStorm/PhpStorm 配置识别 *.wpy 文件代码 ...
- Hdoj 2041.超级楼梯 题解
Problem Description 有一楼梯共M级,刚开始时你在第一级,若每次只能跨上一级或二级,要走上第M级,共有多少种走法? Input 输入数据首先包含一个整数N,表示测试实例的个数,然后是 ...