当没有浏览器兼容性限制时，就大胆地使用transiton的3D效果吧，前端也要做不一样的烟火！

*常用的3D效果

rotateX/rotateY/rotateZ/rotate3d
translateX/translateY/translateZ/translate3d

基础的效果属性就不多说，下面说一下修饰属性：

1.perspective

视距，又叫做景深，描述为眼睛到目标元素的距离：

此属性添加在3D变换元素的父级元素上

    #box {

        width: 100px;

        height: 100px;

        border: 1px solid #000;

        padding: 100px;

        -webkit-perspective: 200px;

        perspective: 200px;

    }

    #div {

        width: 100px;

        height: 100px;

        background: red;

        transition: 1s;

    }

2.transform-style

描述：元素在做3d变换时，是否保留子元素的3d变换

属性值：

（1）flat 不保留
（2）preserve-3d 保留子元素3D变换

不保留时旋转130deg的效果：

保留时旋转130deg的效果：

3.perspective-origin

描述为: 视线方向，站在增加此属性的元素的指定位置，详见下图

从底部正中央看，旋转130deg后的效果：

perspective-origin: center bottom;

从顶部正中央看旋转13deg的效果：

perspective-origin: center top;

4.backface-visibility: hidden;

描述为：隐藏背面（和父级角度相反相对的即为背面）

正面效果：

旋转150deg后

旋转180deg后

代码贴在下面，可自己运行查看：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width,user-scalable=no" />

<title>Document</title>

<style type="text/css">

#box {

    width: 100px;

    height: 100px;

    border: 1px solid #000;

    padding: 100px;

    -webkit-perspective: 200px;

    perspective: 200px;

}

#div {

    width: 100px;

    height: 100px;

    background: red;

    transition: 3s;

    -webkit-transform-style: preserve-3d;

    transform-style: preserve-3d;

    position: relative;

}

#div span {

    position: absolute;

    left: 0;

    top: 0;

    width: 100px;

    height: 100px;

    display: block;

    font-size: 50px;

    text-align: center;

    color: #fff;

    -webkit-backface-visibility: hidden;

    backface-visibility: hidden;

    -webkit-transform-style: preserve-3d;

    transform-style: preserve-3d;

}

#div span:nth-of-type(1){

    background: red;

    -webkit-transform: rotateY(0deg);

    transform: rotateY(0deg);

}

#div span:nth-of-type(2){

    background: green;

    -webkit-transform: rotateY(180deg);

    transform: rotateY(180deg);

}

#div em {

    display: block;

    text-align: center;

    line-height: 100px;

    font-style: normal;

    -webkit-transform: translateZ(20px);

    transform: translateZ(20px);

}

</style>

<script type="text/javascript">

document.addEventListener('touchstart', function(e) {

    e.preventDefault();

});

window.onload = function(){

    var div = document.querySelector('#div');

    div.addEventListener('touchend', function(e) {

        div.style.WebkitTransform = div.style.transform = "rotateY(180deg)";

    });

};

</script>

</head>

<body>

<div id="box">

    <div id="div">

        <span><em>正</em></span>

        <span><em>反</em></span>

    </div>

</div>

</body>

</html>

通俗讲解transform3D变换时css各属性的作用与搭配的更多相关文章

  1. 小甲鱼PE详解之IMAGE_OPTIONAL_HEADER32 结构定义即各个属性的作用（PE详解03）

    咱接着往下讲解IMAGE_OPTIONAL_HEADER32 结构定义即各个属性的作用! (视频教程:http://fishc.com/a/shipin/jiemixilie/) 接着我们来谈谈 IM ...

  2. CSS(7)--- 通俗讲解清除浮动

    CSS(7)--- 通俗讲解清除浮动 上一篇讲了CSS浮动 博客地址:CSS(6)---通俗讲解浮动(float) 一.理解清除浮动 1.为什么要清除浮动 我们前面说过,浮动本质是用来做一些文字混排效 ...

  3. CSS(8)---通俗讲解定位(position)

    CSS(8)---通俗讲解定位(position) CSS有三种基本的定位机制: 普通流.浮动.定位.前面两个之前已经讲过,详见博客: 1.CSS(5)---通俗讲解盒子模型 2.CSS(6)---通 ...

  4. CSS(6)---通俗讲解浮动(float)

    CSS(6)---通俗讲解浮动(float) CSS有三模块:盒子模型.浮动 .定位.上篇博客有讲到 盒子模型地址:CSS(5)---通俗讲解盒子模型 一.理解浮动 1.概念 概念 浮动可以理解为让某 ...

  5. 验分享：CSS浮动(float,clear)通俗讲解

    经验分享:CSS浮动(float,clear)通俗讲解 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不 ...

  6. css 12-CSS3属性详解：动画详解

    12-CSS3属性详解:动画详解 #前言 本文主要内容: 过渡:transition 2D 转换 transform 3D 转换 transform 动画:animation #过渡:transiti ...

  7. 前端基础之CSS的引入+HTML标签选择器+CSS操作属性

    clear:left/ringt属性 CSS:语法形式上由选择器+以及一条或多条声明组成:选择器查找到指定的html标签后,使用css属性设置html标签的样式:                   ...

  8. 详解CSS float属性（转）

    详解CSS float属性   阅读目录 基础知识 float的详细细节 float特殊情况 clear属性 清除浮动 float的应用 总结 CSS中的float属性是一个频繁用到的属性,对于初学者 ...

  9. 你不知道的CSS背景—css背景属性全解

    CSS背景在网页设计中使用频率非常高,然而对于这个开发人员很熟悉的CSS属性,却隐藏着许多不为初级开发人员熟知的细节,这篇文章尝试扒开这层不为人知的面纱. 首先列举一下CSS中关于元素背景的所有属性并 ...

随机推荐

  1. Java基础-SSM之Spring和Mybatis以及Spring MVC整合案例

    Java基础-SSM之Spring和Mybatis以及Spring MVC整合案例 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 能看到这篇文章的小伙伴,详细你已经有一定的Java ...

  2. Java基础-JAVA中常见的数据结构介绍

    Java基础-JAVA中常见的数据结构介绍 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.什么是数据结构 答:数据结构是指数据存储的组织方式.大致上分为线性表.栈(Stack) ...

  3. 在ajax请求后台时在请求标头RequestHeader加token

    情景:为了保证系统数据的安全性,一般前后台之间的数据访问会有授权与验证,这里的Token机制相对于Cookie支持跨域访问,在RESTful API里面,验证一般可以使用POST请求来通过验证,使服务 ...

  4. ngx_lua_API 指令详解（四）ngx.exec指令

    https://github.com/openresty/lua-nginx-module#ngxexec 参照:http://blog.csdn.net/weiyuefei/article/deta ...

  5. [转载]ASP.NET Error – Adding the specified count to the semaphore would cause it to exceed its maximum count

    http://jwcooney.com/2012/08/13/asp-net-error-adding-the-specified-count-to-the-semaphore-would-cause ...

  6. 【问题收集·中级】关于指示器自定义图片与UUID

    博友问题: 大哥 求教一下 iOS7 能否获取到 uuid 大哥 忙不忙 iOS的加载的时候 动态旋转效果 是 图片 嘛 ? 我的回答 05:43:34hud指示器我用的是这个MBProgressHU ...

  7. zabbix user parameters和Loadable modules的使用方法介绍

    目录 需求 实现 原理 前端配置 后端配置 shell实现 python实现 C实现 需求: 采集主机的-/+ buffers/cache  free的数据 实现: 采集/proc/meminfo中的 ...

  8. C++ socket 网络编程 简单聊天室

    操作系统里的进程通讯方式有6种:(有名/匿名)管道.信号.消息队列.信号量.内存(最快).套接字(最常用),这里我们来介绍用socket来实现进程通讯. 1.简单实现一个单向发送与接收 这是套接字的工 ...

  9. Maven私服安装及配置——(十二)

    0.私服实际是B/S架构的,需要通过浏览器访问.访问地址在 nexus-2.12.0-01\conf\nexus.properties中查看.

  10. python版本管理工具pyenv和包管理工具pipenv

    一.pyenv版本管理工具 pyenv是一个python版本管理工具,可以实现轻松切换多个python版本 它可根据每个用户更改全局python版本,也可以为每个项目指定python版本,还可以管理v ...