当没有浏览器兼容性限制时，就大胆地使用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. 61. Rotate List(M);19. Remove Nth Node From End of List(M)

    61. Rotate List(M) Given a list, rotate the list to the right by k places, where k is non-negative. ...

  2. 字符串日期转化以及yyyy-MM-dd HH：mm：ss大小写解释

    字符串日期转化 字符串转换为Calendar对象: // 日期字符串 private String dateStr; // 将字符串转换后的Calender对象 private Calendar ca ...

  3. 用到的设计模式总结--单例模式+工厂方法模式+Builder模式

    一,工厂方法模式和单例模式 工厂方法模式中有一个抽象的工厂接口和一个抽象的产品接口.然后,具体的工厂实现抽象工厂并负责生产具体的产品.由客户端决定 new 哪个具体的工厂,从而生产哪种产品. 因此,与 ...

  4. [原] eclipse 无法找到 run as junit

    碰见这个问题,折磨我好一下! 问题根源和解决方式 第一,保证有junit jar包,基本不会犯这错误: 第二,保证你这个类是Source可编译文件,要是这个类在普通文件夹下,工程是不会编译它的,也就找 ...

  5. CS229 笔记06

    CS229 笔记06 朴素贝叶斯 事件模型 事件模型与普通的朴素贝叶斯算法不同的是,在事件模型中,假设文本词典一共有 \(k\) 个词,训练集一共有 \(m\) 封邮件,第 \(i\) 封邮件的词的个 ...

  6. SDWebImage源码阅读-第二篇

    一  SDWebImageManager的downloadImageWithURL的方法 上一篇,我们刚开了个头,分析了一下开始加载图片之前如何取消其他正在下载的任务,接着,我们回到 - (void) ...

  7. 采用jacob实现word转pdf

    网络上已经有很多这方面的内容,在用之前也是参考了好多别人的文章,下面记录下我自己的整合过程.整个过程都比较简单: 开发环境:win8 64位系统,在2008下面部署也是一样的. 文档要求jdk的版本要 ...

  8. 搭建RabbitMQ集群（Docker）

    前一篇搭建RabbitMQ集群(通用)只是把笔记直接移动过来了,因为我的机器硬盘已经满了,实在是开不了那么虚拟机. 还好,我的Linux中安装了Docker,这篇文章就简单介绍一下Docker中搭建R ...

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

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

  10. MySQL之EXPLAIN 执行计划详解

    explain 可以分析 select 语句的执行,即 MySQL 的“执行计划. 一.type 列 MySQL 在表里找到所需行的方式.包括(由左至右,由最差到最好): | All | index ...