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. bugku web8

    打开网站,是一段PHP代码, <?php extract($_GET); if (!empty($ac)) { $f = trim(file_get_contents($fn)); if ($a ...

  2. Nexus搭建开发组的私有仓库

    一.私有仓库的价值 开发Java应用系统,用到Maven.sbt和 Gradle等构建工具,在构建过程中一般需要从互联网下载依赖库,构建私有仓库就是为了在开发组或者部门内共用,从而节省整体的下载成本和 ...

  3. Be Nice！要善良

    [1]  It is nice to be important, but it is more important to be nice. [2]  What simple act of kindne ...

  4. SecureCRT连接虚拟机下的CentOS7

    1.首先在VMWare下配置CentOS为桥接模式: 2.查看本机ip: 3.ip addr查看centos的mac地址: 4.在root权限下修改/etc/sysconfig/network-scr ...

  5. shell读取文件写入新文件

    #!/bin/sh #系统简称 SYST="HVPS" #发送行号 SEND1234SEND=" #接收行号 RECV1234RECV=" cd /home/w ...

  6. Vue-CLI项目vuex仓库

    0901自我总结 Vue-CLI项目vuex仓库 一.概念 vuex仓库是vue全局的数据仓库,好比一个单例,在任何组件中通过this.$store来共享这个仓库中的数据,完成跨组件间的信息交互. v ...

  7. shark恒破解笔记5-VB之rtcMsgBox

    本次是来破解一个名为”系统提速精灵“的软件,方法是对rtcMsgBox下断点. 运行程序输入假码,会提示“注册码错“ 在oep上面可以看到大量vb引擎函数  明显的VB程序 载入OD对rtcMsgBo ...

  8. Lock wait timeout exceeded？代码该优化了

    背景 最近在排查问题时发现,偶尔会发生关于数据库锁超时的现象,会发生像如下的报错信息: Exception in thread "pool-3-thread-1" org.spri ...

  9. Ubuntu使用中遇到的的一些问题

    制作ubuntu启动盘后,U盘只读. ubuntu自带的"启动盘创建器(usb-creator-gtk)"制作启动盘后,U盘只读. 打开ubuntu自带的"磁盘(hard ...

  10. FTPClient连续读取文件

    最近在使用FTPClient连续读取ftp上的多个文件内容时,遇到了两个问题: 1. 在for循环中,FTPClient只能读取到第一个文件内容,读取第二个时遇到NPE问题. 2. 遇到程序锁死. 下 ...