当没有浏览器兼容性限制时，就大胆地使用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. SQL Server 中ROW_NUMBER() OVER基本用法

    1.不能排序法 * FROM table1 WHERE id NOT IN ( SELECT TOP 开始的位置 id FROM table1 ) 2.SQL 2000 临时表法 DECLARE @S ...

  2. linux - JDK 环境

    JDK安装 vi /etc/profile # 添加环境变量 export JAVA_HOME=/usr/local/jdk1.8.2_45 export CLASSPATH=.:$JAVA_HOME ...

  3. JavaScript Cookies取值

    http://www.w3school.com.cn/js/js_cookies.asp

  4. 第13月第25天 ios11 uitableview reloaddata contentsize

    1. [tableView reloadData]; dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.1 * NSEC_PER_ ...

  5. CF11D A Simple Task（状压DP）

    \(solution:\) 思路大家应该都懂: 状压DP:\(f[i][j]\),其中 \(i\) 这一维是需要状压的,用来记录19个节点每一个是否已经走过(走过为 \(1\) ,没走为 \(0\) ...

  6. GBDT理解

    一.提升树 提升方法实际采用加法模型(即基函数的线性组合)与前向分布算法.以决策树为基函数的提升方法称为提升树,boosting tree.对分类问题的决策树是二叉分类树,对回归问题的决策树是二叉回归 ...

  7. CentOS安装SVN客户端（rpm）

    http://mirrors.163.com/centos/6/os/x86_64/Packages/ 1.检查是已经安装了svn: rpm -qa subversion subversion-1.7 ...

  8. USB的挂起和唤醒(Suspend and Resume)【转】

    转自:http://m.blog.csdn.net/blog/luckywang1103/25244091 USB协议的第9章讲到USB可见设备状态[Universal Serial Bus Spec ...

  9. php毫秒时间戳

    2014年5月23日 17:46:04 凡事还是得靠自己呀,网上太多坑 如果你的机器是 32位 的可以看这个: list($usec, $sec) = explode(' ', microtime() ...

  10. 如何在Axure中使用FontAwesome字体图标

    Font Awesome为您提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小.颜色.阴影或者其它任何支持的效果. FontAwesome应用在web网页开发中非常方便, ...