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. ConcurrentHashMap实现原理以及源码分析

    ConcurrentHashMap是HashMap的高并发版本,是线程安全的,而HashMap是非线程安全的 一.底层实现 底层结构跟hashmap一样,都是通过数组+链表+红黑树实现的,不过它要保证 ...

  2. 题解：2018级算法第二次上机 Zexal的竞赛

    题目描述: 样例: 实现解释: 一道需要一点思考的动态规划题目 知识点:动态规划,数据记录 首先将题目描述调整:分别输入不同分数的题目总分(便于后续计算),当获得了i分数的总分后无法获得i-1和i+1 ...

  3. VMware虚拟机的三种网络管理模式

      VMware提供了三种网络工作模式:Bridged(桥接模式).NAT(网络地址转换模式).Host-Only(仅主机模式). 打开VM虚拟机,在选项栏“编辑”->“虚拟网络编辑器”中看到V ...

  4. 网站是HTTP?10分钟变成HTTPS！域名免费添加配置SSL证书，变成https//环境

    对于小程序request请求需要https域名.navigator.geolocation定位也需要在https环境下才可以生效等问题: 前端开发越来越需要https环境来来测试一下API接口和各类问 ...

  5. ‎Cocos2d-x 学习笔记(19) Control Invocation

    [Cocos2d-x 学习笔记 目录链接] 1. 简介 control为其子类提供了touch回调函数,当子类触发EventType相关事件时,会调用相关的回调函数. control对象接收到的事件类 ...

  6. Linux power supply class(1)_软件架构及API汇整【转】

    1. 前言 power supply class为编写供电设备(power supply,后面简称PSY)的驱动提供了统一的框架,功能包括: 1)抽象PSY设备的共性,向用户空间提供统一的API. 2 ...

  7. Django框架简介与使用注意事项

    一.Django框架简介 MVC框架和MTV框架 MVC框架 MVC,全名是Model View Controller,是软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型(Model). ...

  8. 热烈祝贺达孚电子（NDF）网站上线

    尊敬的客户: 您们好! 为适应公司发展的需要,树立公司的良好形象,满足大家更多的了解电容器系列产品及公司的服务,经过1个多月的筹备,在2019年10月21日公司网站正式上线啦,这标志着NDF(达孚电子 ...

  9. 04 python学习笔记-函数、函数参数和返回值（四）

    函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段.函数能提高应用的模块性,和代码的重复利用率.Python提供了许多内建函数,比如print(),我们也可以自己创建函数,这叫做用户自定 ...

  10. springboot使用spring配置文件

    1.如何在springboot中使用spring的配置文件,使用@Configuration和@ImportResource注解 package com.spring.task; import org ...