css3 preserve-3d 的理解

<pre>
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>转换模块-正方体</title>
<style>
* {
margin: 0;
padding: 0;
/*去除默认边距*/
}

body,
html {
width: 100%;
height: 100%;
}

.wrap3d {
width: 100%;
height: 100%;
position: relative;
/*设置摄像机离目标物体距离 让3D效果看起来更逼真*/
transform: perspective(400px);
-webkit-transform: perspective(400px);
/*设置为3d空间*/
transform-style: preserve-3d;

position: relative;

}
.hongmian{
width:30%;
height:22rem;
position: absolute;
left:30%;
top:2rem;
background: #F00;
transform: rotateX(90deg) translateZ(-20px);
-webkit-transform: rotateX(4deg) translateZ(-20px);
}

</style>
</head>

<body>
<div class="wrap3d">
<div class="hongmian"></div>
</div>
</body>

</html>
</pre>

css3 preserve-3d 的理解 注意IOS上的兼容的更多相关文章

  1. :active 为什么在ios上失效

    :active是针对鼠标,而手机上是没有鼠标,而是touchstart,所以早成了ios上不兼容 解决方法是: window.onload = function(){ document.body.ad ...

  2. 我所理解的Android和iOS上的View

    View,几乎是所有界面系统中的基类,在iOS里面是UIView,在Android里是View. 那么,到底View是什么东西,他做了些什么,他是怎么做到的,在这篇文章中,希望能带给大家一些启发. 抽 ...

  3. CSS3之3D变换实例详解

    CSS3的3D效果很赞,本文实现简单的两种3D翻转效果.首先看效果和源代码,文末是文绉绉的总结部分^_^ 以下CSS代码为了简洁没有添加前缀,请视情况自行添加(自动化时代推荐使用其他的一些方法,如gu ...

  4. HTML5和CSS3实现3D转换效果 CSS3的3D效果

    上次,我们一起研究了css3的2d模块,这次我们一起来看一下css3的3d模块. 首先,我们来了解一下3d的坐标系,x轴在屏幕上为水平方向,y轴为垂直方向,而z轴为垂直于屏幕的方向. 不理解的话可以参 ...

  5. 详解如何用 CSS3 完成 3D transform变换

    Tips:阅读提示!!! 首先,本文针对的是3D transform变换的学习,所以你需要对 2D transform变换 有一定的了解 其次,需要说明的是,代码是一种需要自己不断实践的学科,建议各位 ...

  6. 细数iOS上的那些安全防护

    细数iOS上的那些安全防护  龙磊,黑雪,蒸米 @阿里巴巴移动安全 0x00 序 随着苹果对iOS系统多年的研发,iOS上的安全防护机制也是越来越多,越来越复杂.这对于刚接触iOS安全的研究人员来说非 ...

  7. css3的3D和2D

    css3的3D旋转:rorateX():参数为正值时,盒子是围绕x轴,完成从Y轴正方向到Y轴负方向的旋转,视觉上呈现高度上的变化.rorateY():参数为正值时,盒子是围绕Y轴,完成从X轴正方向到X ...

  8. 解决protobuf不能直接在IOS上使用，利用protobuf-net在IOS上通讯

    ---------------------------------------------------------------------------------------------------- ...

  9. iOS上简单推送通知（Push Notification）的实现

    iOS上简单推送通知(Push Notification)的实现 根据这篇很好的教程(http://www.raywenderlich.com/3443/apple-push-notification ...

随机推荐

  1. 终端 10X 工作法（一）

    目录 1. Terminal 2. Grep 3. Sed 4. Awk 5. Xargs 6. Find 在 github 上面有一个 700 多人 star 的 repo 叫做 Bash-Onel ...

  2. Django实现WebSSH操作Kubernetes Pod

    优秀的系统都是根据反馈逐渐完善出来的 上篇文章介绍了我们为了应对安全和多分支频繁测试的问题而开发了一套Alodi系统,Alodi可以通过一个按钮快速构建一套测试环境,生成一个临时访问地址,详细信息可以 ...

  3. PowerBI系列之入门案例动态销售报告

    本文将讲解如何从零开始使用PowerBI Desktop制作一份动态销售报告.帮助大家快速入门PowerBI Desktop的操作.我们先来看一下一份动态销售报告的构成. 1.左上角放置了小黎子数据分 ...

  4. Python_MySQL数据库的写入与读取

    [需求]1. 在数据库中创建表,且能按时间自动创建新表 2. 数据写入数据库 3. 从数据库读取数据 1. 创建表,并自动更新 def Creat_Table(InitMySQL,tabel_name ...

  5. 后门免杀工具-Backdoor-factory

    水一水最近玩的工具 弄dll注入的时候用到的 介绍这款老工具 免杀效果一般..但是简单实用  目录: 0x01 backdoor-factory简介 0x02 特点功能 0x03 具体参数使用 PS: ...

  6. Neo4j:图数据库GraphDB(一)入门和基本查询语句

    图数据库的代表:Neo4j 官网:  http://neo4j.com/ 引言:为什么使用图数据库 在很多新型项目中,应用图数据库已经是势在必行的趋势了,因为图数据库可以很好的表示各种节点与关系的概念 ...

  7. vue 页面滚动到原位置

    哈哈哈,昨天登QQ的时候,意外发现有人看了我写的博客,居然还加了我,这就激起了我内心的小波澜啊 公司最近在做电商,用的前端框架依然是VUE 矩MAX(微信公众号)可以搜的到哦,安卓商店或苹果AppSt ...

  8. 达孚电子（NDF）参加2019年印度电子元器件展圆满成功

    2019年9月27日-29日,达孚电子(NDF)参加2019年印度国际电子元器件及生产设备展览会在印度国际展览中心举得圆满成功,为期三天的展会中,打造了一场电子元器件行业交流的饕餮盛宴. 本次展会取得 ...

  9. zepto源码分析·core模块

    准备说明 该模块定义了库的原型链结构,生成了Zepto变量,并将其以'Zepto'和'$'的名字注册到了window,然后开始了其它模块的拓展实现. 模块内部除了对选择器和zepto对象的实现,就是一 ...

  10. vue事件双向绑定

    事件 案例: vue的事件绑定原理:改变图片的背景颜色问题来实现这个框架的使用方法, new Vue({ el:"", data:{}, methord:{}, computed: ...