css3中添加了很多新的标签

属性 描述 css
transform 向元素应用 2D 或 3D 转换。 3
transform-origin 允许你改变被转换元素的位置。 3
transform-style 规定被嵌套元素如何在 3D 空间中显示。 3
perspective 规定 3D 元素的透视效果。 3
perspective-origin 规定 3D 元素的底部位置。 3
backface-visibility 定义元素在不面对屏幕时是否可见。 3

可以通过这些属性来对一个平面图形操作达到一个立体的效果

函数 描述
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵
translate3d(x,y,z) 定义 3D 转化
translateX(x) 定义 3D 转化，仅使用用于 X 轴的值
translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值
translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值
scale3d(x,y,z) 定义 3D 缩放转换
scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值
scaleY(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值
scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值
rotate3d(x,y,z,angle) 定义 3D 旋转
rotateX(angle) 定义沿 X 轴的 3D 旋转
rotateY(angle) 定义沿 Y 轴的 3D 旋转
rotateZ(angle) 定义沿 Z 轴的 3D 旋转
perspective(n) 定义 3D 转换元素的透视视图

红色的标签就是这次案例里面所用到的

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style>

         * {

             margin: 0;

             padding: 0;

         }

         .container {

             width: 200px;

             height: 200px;

             margin: 200px auto;

             border: 1px solid black;

             perspective: 800px;

             transform-origin: center center;

         }

         #divE {

             width: 200px;

             height: 200px;

             position: relative;

             transform-style: preserve-3d;

             transform-origin: center center -50px;

         }

         #divE figure {

             width: 200px;

             height: 200px;

             left: 0;

             top: 0;

             /*display: block;*/

             position: absolute;

             transform-origin: center center;

         }

         .front {

             transform: rotateY( 0deg) translateZ( 100px);

             background: red;

             opacity: 0.5;

         }

         .back {

             transform: rotateY( 180deg) translateZ( 100px);

             background: blue;

             opacity: 0.5;

         }

         .right {

             transform: rotateY( 90deg) translateZ( 100px);

             background: gold;

             opacity: 0.5;

         }

         .left {

             transform: rotateY( -90deg) translateZ( 100px);

             background: green;

             opacity: 0.5;

         }

         .top {

             transform: rotateX( 90deg) translateZ( 100px);

             background: lightblue;

             opacity: 0.5;

         }

         .bottom {

             transform: rotateX( -90deg) translateZ( 100px);

             background: indigo;

             opacity: 0.5;

         }

         .myfirst {

             /*定义动画插件名变*/

             animation-name: myfirst;

             /*定义动画完成一个周期需要的时间*/

             animation-duration: 2s;

             /*定义动画开始的时间*/

             animation-delay: 1s;

             /*定义动画的速度曲线,这是定义为匀速*/

             animation-timing-function: linear;

             /*定义动画播放的次数,这里定义为重复*/

             animation-iteration-count: infinite;

             /*定义下一周期是否逆向,这里定义为逆向*/

             animation-direction: alternate;

             /*定义动画是否暂停播放,这里定义为播放*/

             animation-play-state: running;

         }

         @keyframes myfirst {

             0% {

                 transform: rotate3d(0, 1, 0, 0deg);

                 /*transform: rotate3d(1, 0, 0, 0deg);*/

                 transform-origin: center center;

             }

             100% {

                 transform: rotate3d(0, 1, 0, 360deg);

                 /*transform: rotate3d(1, 0, 0, 180deg);*/

                 transform-origin: center center;

             }

         }

     </style>

 </head>

 <body>

     <div class="container">

         <div id="divE">

             <figure class="front">1</figure>

             <figure class="back">2</figure>

             <figure class="right">3</figure>

             <figure class="left">4</figure>

             <figure class="top">5</figure>

             <figure class="bottom">6</figure>

         </div>

     </div>

 </body>

 <script>

     var a = document.getElementById("divE");

     // alert(a);

     a.onclick = function() {

         a.className = "myfirst";

     }

     a.onmouseleave = function() {

         a.className = a.className.replace("myfirst", " ");

     }

 </script>

 </html>

第一,先要有六个div前后,左右,上下;在六个div外面需要一个父级容器,在父级的外部需要一个

CSS3之3D效果中的transform运用的更多相关文章

  1. CSS3打造3D效果——perspective transform的深度剖析

    声明:此篇博文虽是自己手写,但大量资源取自 张鑫旭 的博文.想看更详细 更专业的剖析请看张鑫旭的博文. 昨天对css3的transform做了初步的分析和认识,突然看到perspective属性,调了 ...

  2. 吃透css3之3d属性--perspective和transform

    本文为原创,转载请注明出处: cnzt 写在前面:最近写了个3d轮播效果图,在此将思路和过程中遇到的问题都记录下来. 首先,我们下来了解一下perspective和transform都是做什么的. t ...

  3. HTML5和CSS3实现3D转换效果 CSS3的3D效果

    上次,我们一起研究了css3的2d模块,这次我们一起来看一下css3的3d模块. 首先,我们来了解一下3d的坐标系,x轴在屏幕上为水平方向,y轴为垂直方向,而z轴为垂直于屏幕的方向. 不理解的话可以参 ...

  4. CSS3 文本3D效果

    代码如下: <!DOCTYPE html> <html> <head> <style> h1 { color: #3D3D3D; font-size: ...

  5. 「CSS3 」3D效果 & 透视

    CSS3d透视 perspective属性 原文链接:https://segmentfault.com/a/1190000003843764

  6. css3 3D效果

    css3 3D变形 transfrom初学 这个礼拜学了css3 3d,感觉到css无穷的魅力,可以通过几个特定的代码符号创建出3D效果的页面. ___ 透视 一个元素需要一个透视点才能激活3D空间, ...

  7. CSS3之3D变换实例详解

    CSS3的3D效果很赞,本文实现简单的两种3D翻转效果.首先看效果和源代码,文末是文绉绉的总结部分^_^ 以下CSS代码为了简洁没有添加前缀,请视情况自行添加(自动化时代推荐使用其他的一些方法,如gu ...

  8. 02-移动端开发教程-CSS3新特性（中）

    1. 新的背景 背景在CSS3中也得到很大程度的增强,比如背景图片尺寸.背景裁切区域.背景定位参照点.多重背景等. 1.1 background-size设置背景图片的尺寸 cover会自动调整缩放比 ...

  9. 用CSS3做3D动画的那些事

    年会做了个3D变换的抽奖系统,在这里分享下通过CSS3制作3D效果的心得.抽奖系统虽然够炫酷,可惜抽的时候出了点bug,好几百人啊我的小心脏啊.虽然这个锅后面甩给会场的老爷电脑了(手动白眼). 首先介 ...

随机推荐

  1. HTTP协议与HTML form

    HTTP协议与HTML form HTTP协议是应用层协议, 全称是HyperText Transfer Protocol HTTP协议是一种请求回应式的, 一个Request一定会有一个Respon ...

  2. C#有意思的算法题

    年底了,特贡献一些C#有意思的算法题   2013年,即将要过去了.屌丝C#程序员们拿到了年终奖不?是不是又想蠢蠢欲动了?是不是想通过跳槽来为自己实现加薪的梦想?好吧,跳槽之前还是做点准备吧,准备好C ...

  3. 设计适用于SOA的类型

    我们经常把一个项目分层去开发,无论是通过三层来面向对象开发还是用WCF或Remoting等面向服务的方式开发,返回值只有一个,如果底层出错了我们一般写日志来记录这些错误,然后分析错误来解决问题,但用户 ...

  4. 活动图activity diagram

    活动图activity diagram 系列文章 [UML]UML系列——用例图Use Case [UML]UML系列——用例图中的各种关系(include.extend) [UML]UML系列——类 ...

  5. N个骰子的点数和的概率分布

    程序设计思路: 假设有n个骰子,关键是需要统计每个点数出现的次数.首先分析第一个骰子点数和有1到6的点数,计算出1到6的每种点数 的次数,并将结果用一个数组pos1记录.然后分析有两个骰子时, 点数为 ...

  6. 一个HttpWebRequest工具类

      using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.N ...

  7. WPF中StackPanel的使用方法

    StackPanel 1.StackPanel:释义为是最简单的控制面板,它把其中的UI元素按横向或纵向堆积排列. 2.常用属性:width:获取或设置元素的宽度.Orientation:用于控制面板 ...

  8. .NET：脏读、不可重复读和幻读测试

    目录 背景脏读原因重现和避免不可重复读原因重现和避免幻读原因重现和避免嵌套事务导致的死锁备注 背景返回目录 昨天才发现如果一条数据被A事务修改但是未提交,B事务如果采用“读已提交”或更严格的隔离级别读 ...

  9. 彩蛋 Python之道

    彩蛋 Python之道 作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 使用下面的语句可以调出Python中的一个彩蛋, impo ...

  10. 桥接模式及C++实现 C++设计模式-AbstractFactory抽象工厂模式

    桥接模式及C++实现 桥接模式 先说说桥接模式的定义:将抽象化(Abstraction)与实现化(Implementation)分离,使得二者可以独立地变化. 桥接模式号称设计模式中最难理解的模式之一 ...