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的数组的作业11月06日

    动手动脑 实验一:了解for循环得到棋盘结构 (1) 程序: import java.io.*; public class QiPan { //定义一个二维数组来充当棋盘 private String ...

  2. java高并发_博客-网址-资料 推荐

    大概说一下自己作为入门学习java高并发的博客地址,很不错在自己的博客里记录一下:如果能有刷到我的博客的骚年,又刚好想了解java高并发,强烈推荐看看 地址:http://www.itsoku.com ...

  3. Ubuntu16.04换源

    换成国内最快的阿里云源 第一步:备份原来的源文件 cd /etc/apt/ 然后会显示下面的源文件sources.list 输入命令 sudo cp sources.list sources.list ...

  4. POJ 1062 昂贵的聘礼(带限制条件的dijkstra)

    题目网址:http://poj.org/problem?id=1062 题目: 昂贵的聘礼 Time Limit: 1000MS   Memory Limit: 10000K Total Submis ...

  5. spring cloud 优雅停机

    spring cloud 优雅停机 大部分部署项目如果要停掉项目一般都是用kill -9 来杀进程 但是由于Eureka采用心跳的机制来上下线服务,会导致服务消费者调用已经kill的服务提供者然后出错 ...

  6. Linux shell脚本笔记

    shell 命令解释器 是用来解释用户对系统的操作 使用 cat /etc/shells 可以查看 系统安装的shell Linux 启动过程: BIOS -> MBR -> BootLo ...

  7. 魏永明： MiniGUI的涅槃重生之路

    本文系转载,著作权归作者所有. 商业转载请联系作者获得授权,非商业转载请注明出处. 作者: 魏永明 来源: 微信公众号linux阅码场(id: linuxdev) 本文背景 MiniGUI是最负盛名的 ...

  8. Leetcode（4）寻找两个有序数组的中位数

    Leetcode(4)寻找两个有序数组的中位数 [题目表述]: 给定两个大小为 m 和 n 的有序数组 nums1 和* nums2. 请你找出这两个有序数组的中位数,并且要求算法的时间复杂度为 O( ...

  9. 07 python学习笔记-写一个清理日志的小程序（七）

    #删掉三天前的日志 #1.获取到所有的日志文件, os.walk #2.获取文件时间 android 2019-09-27 log,并转成时间戳 #3.获取3天前的时间 time.time() - 6 ...

  10. unity射线检测

    unity中射线检测时非常实用也经常实用的一种手段.下面讲解一下射线检测问题. 1)Ray 根据射线端点和射线的方向定义一条射线 Ray ray= new Ray(transform.position ...