CSS3之3D效果中的transform运用
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运用的更多相关文章
- CSS3打造3D效果——perspective transform的深度剖析
声明:此篇博文虽是自己手写,但大量资源取自 张鑫旭 的博文.想看更详细 更专业的剖析请看张鑫旭的博文. 昨天对css3的transform做了初步的分析和认识,突然看到perspective属性,调了 ...
- 吃透css3之3d属性--perspective和transform
本文为原创,转载请注明出处: cnzt 写在前面:最近写了个3d轮播效果图,在此将思路和过程中遇到的问题都记录下来. 首先,我们下来了解一下perspective和transform都是做什么的. t ...
- HTML5和CSS3实现3D转换效果 CSS3的3D效果
上次,我们一起研究了css3的2d模块,这次我们一起来看一下css3的3d模块. 首先,我们来了解一下3d的坐标系,x轴在屏幕上为水平方向,y轴为垂直方向,而z轴为垂直于屏幕的方向. 不理解的话可以参 ...
- CSS3 文本3D效果
代码如下: <!DOCTYPE html> <html> <head> <style> h1 { color: #3D3D3D; font-size: ...
- 「CSS3 」3D效果 & 透视
CSS3d透视 perspective属性 原文链接:https://segmentfault.com/a/1190000003843764
- css3 3D效果
css3 3D变形 transfrom初学 这个礼拜学了css3 3d,感觉到css无穷的魅力,可以通过几个特定的代码符号创建出3D效果的页面. ___ 透视 一个元素需要一个透视点才能激活3D空间, ...
- CSS3之3D变换实例详解
CSS3的3D效果很赞,本文实现简单的两种3D翻转效果.首先看效果和源代码,文末是文绉绉的总结部分^_^ 以下CSS代码为了简洁没有添加前缀,请视情况自行添加(自动化时代推荐使用其他的一些方法,如gu ...
- 02-移动端开发教程-CSS3新特性（中）
1. 新的背景 背景在CSS3中也得到很大程度的增强,比如背景图片尺寸.背景裁切区域.背景定位参照点.多重背景等. 1.1 background-size设置背景图片的尺寸 cover会自动调整缩放比 ...
- 用CSS3做3D动画的那些事
年会做了个3D变换的抽奖系统,在这里分享下通过CSS3制作3D效果的心得.抽奖系统虽然够炫酷,可惜抽的时候出了点bug,好几百人啊我的小心脏啊.虽然这个锅后面甩给会场的老爷电脑了(手动白眼). 首先介 ...
随机推荐
- Vijos:P1001谁拿了最多奖学金
描述 某校的惯例是在每学期的期末考试之后发放奖学金.发放的奖学金共有五种,获取的条件各自不同: 1) 院士奖学金,每人8000元,期末平均成绩高于80分(>80),并且在本学期内发表1篇或1篇以 ...
- ESB与SOA的关系
ESB与SOA的关系 一.SOA和ESB一直是没有明确概念的两个缩略词 SOA----面向服务架构,实际上强调的是软件的一种架构,一种支撑软件运行的相对稳定的结构,表面含义如此,其实SOA是一种通过服 ...
- 目标指向、Icon图标的错误
VS打包后生成快捷方式:目标指向.Icon图标的错误 1.目标指向错误: 在安装***.msi文件后,对快捷方式-->右键-->属性: 发现目标并非指exe文件. 于是我新建了一个快捷方式 ...
- Effective C++ 读书总结
(中文第三版 侯捷 译) 这本书在C++领域也是大名鼎鼎,在微博看到有人说,如果以前学过C语言,那只需花一天时间把 Effective C++ 看一遍,然后再看 leveldb代码(http://t. ...
- EL表达式与三目运算符
在页面实现常量替换,比如 entity.auditi 的值如果为0显示不需要否则显示需要 因为需求就这两个值 所以使用三目运算符比较简洁 如果值为很多个 可使用if else进行判断 ${entit ...
- WPF实现打印功能
WPF实现打印功能 在WPF 中可以通过PrintDialog 类方便的实现应用程序打印功能,本文将使用一个简单实例进行演示.首先在VS中编辑一个图形(如下图所示). 将需要打印的内容放入同一个< ...
- ASP.NET Web API框架揭秘：路由系统的几个核心类型
ASP.NET Web API框架揭秘:路由系统的几个核心类型 虽然ASP.NET Web API框架采用与ASP.NET MVC框架类似的管道式设计,但是ASP.NET Web API管道的核心部分 ...
- 持续集成环境Gitlab-CI的官方安装过程解析
持续集成环境是一个非常重要的工具,在分工合作的项目中有着举足轻重的作用.公司最近要用Gitlab,需要配套的持续集成环境.研究了官方的文档,感觉官方的文档不是很明了.各种修改过后终于成功了.为了大家安 ...
- join多表连接和group by分组
join多表连接和group by分组 上一篇里面我们实现了单表查询和top N查询,这一篇我们来讲述如何实现多表连接和group by分组. 一.多表连接 多表连接的时间是数据库一个非常耗时的操作, ...
- 在C中判断变量存储类型（字符常量／数组／动态变量）
在C中判断变量存储类型(字符常量/数组/动态变量) 在chinaunix论坛上有人问到关于变量存府类型的问题,我觉得可以写个测试代码加深大家对内存使用和布局的理解.下面我把原问题及处理办法贴出来,限供 ...