当没有浏览器兼容性限制时，就大胆地使用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. 洛谷P4486 Kakuro

    题意:你有一个棋盘,某些格子是限制条件,形如"从这里开始下面所有连续空格的和为a"或"从这里开始向右的所有连续空格之和为b"一个格子可以同时拥有两个限制条件. ...

  2. MathExam V2.0

    # 隔壁村小学的小朋友都羡慕哭了2.0版 一.预估与实际 PSP2.1 Personal Software Process Stages 预估耗时(分钟) 实际耗时(分钟) Planning 计划 1 ...

  3. c++并发编程之互斥锁（mutex）的使用方法

    1. 多个线程访问同一资源时,为了保证数据的一致性,最简单的方式就是使用 mutex(互斥锁). 引用 cppreference 的介绍: The mutex class is a synchroni ...

  4. c 取读地图输入

    ][];     scanf("%ld%ld",&n,&m);     ;i<n;i++)         scanf("%s",mat[ ...

  5. CSS表格均匀边框

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. Scala进阶之路-高级数据类型之数组的使用

    Scala进阶之路-高级数据类型之数组的使用 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.数组的初始化方式 1>.长度不可变数组Array 注意:顾名思义,长度不可变数 ...

  7. Oracle之xml的增删改查操作

    工作之余,总结一下xml操作的一些方法和心得! tip: xmltype函数是将clob字段转成xmltype类型的函数,若字段本身为xmltype类型则不需要引用xmltype()函数 同名标签用数 ...

  8. webGL和three.js的关系

    如今浏览器的功能越来越强大,而且这些功能可能通过JavaScript直接调用.你可以用HTML5标签轻松地添加音频和视频,而且可以在HTML5画布上创建各种交互组件.现在这个功能集合里又有了一个新成员 ...

  9. SQL记录-PLSQL变量与常量文字

    PL/SQL变量   变量是只不过是一个给定的存储区域,程序可以操纵的名称.PL/SQL每个变量具有一个特定的数据类型,它决定了大小和变量的存储器的值,可以说存储器和设置操作可以施加到可变内被存储的范 ...

  10. 如何设置Ultraedit自动换行

    有时候这会非常麻烦, 要让Ultraedit自动换行请按发下方法: 1. 点击菜单栏的"高级→配置",找到"编辑器→自动换行/制表符设置". 2. 然后,把&q ...