当没有浏览器兼容性限制时，就大胆地使用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. LeetCode 7最长公共前缀

    编写一个函数来查找字符串数组中的最长公共前缀. 如果不存在公共前缀,返回空字符串 "". 示例 1: 输入: ["flower","flow" ...

  2. REDIS 缓存的穿透，雪崩和热点key

    穿透 穿透:频繁查询一个不存在的数据,由于缓存不命中,每次都要查询持久层.从而失去缓存的意义. 解决办法:①用一个bitmap和n个hash函数做布隆过滤器过滤没有在缓存的键.   ②持久层查询不到就 ...

  3. bzoj千题计划193：bzoj2460: [BeiJing2011]元素

    http://www.lydsy.com/JudgeOnline/problem.php?id=2460 按魔力值从小到大排序构造线性基 #include<cstdio> #include ...

  4. 机器学习:分类算法性能指标之ROC曲线

    在介绍ROC曲线之前,先说说混淆矩阵及两个公式,因为这是ROC曲线计算的基础. 1.混淆矩阵的例子(是否点击广告): 说明: TP:预测的结果跟实际结果一致,都点击了广告. FP:预测结果点击了,但是 ...

  5. CSS function--（来自网易）

    /* function */ .f-cb:after,.f-cbli li:after{;overflow:hidden;content:".";} .f-cb,.f-cbli l ...

  6. # 20155337 2016-2017-2 《Java程序设计》第六周学习总结

    20155337 2016-2017-2 <Java程序设计>第六周学习总结 教材学习内容总结 •串流(Stream): 数据有来源及目的地,衔接两者的是串流对象.如果要将数据从来源取出, ...

  7. Ubuntu 查看CPU温度

    按照这篇文章: http://www.webupd8.org/2014/06/psensor-updated-with-option-to-display.html

  8. spring-boot-mybatis-多数据源

    sql 语句 DROP TABLE IF EXISTS `users`; CREATE TABLE `users` ( `id` bigint(20) NOT NULL AUTO_INCREMENT ...

  9. nginx_upstream_check_module监控后端服务器http

    nginx_upstream_check_module 是专门提供负载均衡器内节点的健康检查的外部模块,由淘宝的姚伟斌大神开发,通过它可以用来检测后端 realserver 的健康状态.如果后端 re ...

  10. 打包部署到tomcat

    部署到tomcat的方法 注意:在eclipse 或 idea 上需要引入外部tomcat 1.将程序打成war包启动tomcat 2.将target 文件下内容压缩城zip,发布到tomcat RO ...