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. Java线程池的底层实现与使用

    前言 在我们进行开发的时候,为了充分利用系统资源,我们通常会进行多线程开发,实现起来非常简单,需要使用线程的时候就去创建一个线程(继承Thread类.实现Runnable接口.使用Callable和F ...

  2. 合并果子（STL优先队列）

    STL优先队列:priority_queue 定义:priority_queue<int>q; 从小到大:priority_queue<int,vector<int>,g ...

  3. Vue-CLI项目中路由传参

    Vue-CLI项目中路由传参 一.标签传参方式:<router-link></router-link> 第一种 router.js { path: '/course/detai ...

  4. is_enable()、is_displayed()、isSelected()

    1.以上三个为布尔类型的函数 2.is_enable()用于存储input.select等元素的可编辑状态,可以编辑返回true,否则返回false 3.is_displayed()本身这个函数用于判 ...

  5. Python_深拷贝和浅拷贝

    深拷贝与浅拷贝 import copy v = 123 v1 = copy.copy(v) #浅拷贝 v2 = copy.deepcopy(v) #深拷贝 **拷贝只拷贝可变数据类型,浅拷贝只拷贝第一 ...

  6. python方法是什么？

    python方法是什么? 方法用来描述对象所具有的行为. 在类中定义的方法可以粗略分为四大类:公有方法.私有方法.静态方法.类方法. 公有方法.私有方法一般所指属于对象的实例方法, 私有方法的名字以两 ...

  7. fullpage.js的引入方法

    1.先到官网上(https://github.com/alvarotrigo/fullPage.js)下载压缩包 2.引入文件 3.布局基本页面结构 4.实现全屏滚动(JS代码) <script ...

  8. Java类型信息（RTTI和反射）

    要想在IT领域站得住脚,必须得不断地学习来强化自己,但是学过的技术不实践很容易便被遗忘,所以一直都打算开个博客,来记录自己学的知识,另外也可以分享给有需要的人! 最近在学习反射,为了更好地理解反射,就 ...

  9. 包管理-rpm

    rpm包管理 程序源代码---->预处理---->编译---->汇编---->链接          数据处理  转为汇编代码  进行汇编    引入库文件    静态编译:. ...

  10. 当node版本升级到8.0以上带来的问题

    1.新增package-lock.json 2.相关babel更新 重新安装 $ npm install babel-preset-env --save-dev .babelrc文件修改 { + &q ...