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压缩算法SDCH

    程序设计中使用的那些共享方法或者技术 前段时间看了个paper是讲述谷歌浏览器使用的压缩方法SDCH,其实原理还是比较简单的. 看了论文后就想总结一下程序中使用的一些共享方法或者技术吧. 1.Goog ...

  2. .NET面向对象特性之多态

    .NET面向对象特性之多态 前言 上一篇总结了面向对象三大特性之一的继承,再接再厉,这一章继续总结多态.同时把继承中涉及到多态的内容进一步补充扩展.可以说“继承”是多态的根基.但继承主要关注的是“共通 ...

  3. Android过滤Logcat输出

    logcat和grep配合使用 1.打印特定tag的log,如打印Tag为Adm的Log        adb logcat | grep Adm        adb logcat | grep - ...

  4. Aliexpress API 授权流程整理

    Aliexpress API 授权流程整理   前言 我零零总总用了好几个月的时间,写了一个自用的小程序,从 Aliexpress 上抓取订单的小程序.刚开始写的时候,该API还没有开放,而且没有订单 ...

  5. HashMap源码剖析

    HashMap源码剖析 无论是在平时的练习还是项目当中,HashMap用的是非常的广,真可谓无处不在.平时用的时候只知道HashMap是用来存储键值对的,却不知道它的底层是如何实现的. 一.HashM ...

  6. Lazy<T>

    Lazy<T> 对象的创建方式,始终代表了软件工业的生产力方向,代表了先进软件技术发展的方向,也代表了广大程序开发者的集体智慧.以new的方式创建,通过工厂方法,利用IoC容器,都以不同的 ...

  7. JS左侧菜单-03

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

  8. PostgreSQL数据的导出导入 save your data!

    PostgreSQL数据的导出导入 导出PostgreSQL数据库中的数据: $ pg_dump -U postgres  -f mydatabase.sql  mydatabase 导入数据时首先创 ...

  9. Visual Studio属性配置中使用宏

    在学习C语言的时候,我们曾经遇到过一个宏的概念.宏的作用机理本质上是宏的展开,C语言中的宏的用法也有很多种(水其实很深...),不过从感觉上来讲,人们大致上会在以下的场景中,利用宏来解决一些窘境:一是 ...

  10. toFixed()要注意的

    toFixed()是Number类型的一种方法,该方法是保留四舍五入取指定位数的小数点,但最终返回值类型是字符串.所以,刚开始用该方法的人要注意不要在计算时使用到该方法.