文档章节

css3 3D旋转特效

zfx2016
 zfx2016
发布于 2016/10/19 11:42
字数 1001
阅读 25
收藏 0

最近自己的网站正在制作,由于是个人网站,所以我傲娇的抛弃了IE,痛快的用起了css3和html5的诸多特效,然而问题亦随之而来。这篇文章的主要讲解在使用css3的3D旋转的时候遇到的文章,错误之处,还望各位看官老爷评论中指出。

3D旋转,难点在与其处在一个三维的空间中,我们需要发挥一下空间想象力在头脑中构建它的结构,同时,它的坐标系是随着所做的3D变化而改变的,所以在进行变换的过程中,不同变换动作的顺序亦是至关重要。

网页中常见的3D旋转特效有两种:绕Y轴旋转和绕X轴旋转。

绕Y轴旋转180度:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>绕Y轴旋转</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				margin: 50px auto;
			}
			#box,.container,.front,.back{
				width: 200px;
				height: 200px;	
			}
			.container{
				position: relative;
				transform-style: preserve-3d;
				transition: all 1s linear;
			}
			.container:hover{
				transform: rotateY(180deg);
			}
			.front,.back{
				position: absolute;
				top: 0;
				left: 0;
				backface-visibility: hidden;
				color: #fff;
				font-size: 40px;
				text-align: center;
				line-height: 200px;
			}
			.front{
				background: red;
			}
			.back{
				background: green;
				transform: rotateY(180deg);
			}
			
			
		</style>
	</head>
	<body>
		<div id="box">
			<div class="container">
				<div class="front">front</div>
				<div class="back">back</div>
			</div>
		</div>
	</body>
</html>

代码没有注释,因为都是一些属性,不懂的属性可以直接百度,这里主要讲解其核心思想。

绕Y轴旋转,就是将正面的转到后面,而后面的显示在正面。如果直接旋转,不设置背面的元素的话,那么旋转180度后你所看到的就像一张画贴在玻璃上,你从背面看而已。这种比较简单,但是在网页中并不常用,最多的还是上面代码中所写的这种效果。

1、我们要有两个面。设置backface-visibility为hidden,隐藏两个面的背面,将需要显示在背面的那个面back绕Y轴旋转180度。

2、将两个面装在一个盒子a里面并且设置盒子transform-style: preserve-3d,我们要操作的是这个盒子。

3、给盒子a设置鼠标移入旋转180度,完成! 


绕X轴旋转和绕Y轴旋转的本质是相同的,所以绕X轴旋转直接讲解旋转90度,这个原理也可以反过来套用在Y轴的旋转上。

相比来说,旋转90度要做的处理多了几步。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>绕X轴旋转</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				margin: 50px auto;
				border: 1px solid blue;
			}
			#box,.container,.front,.back{
				width: 200px;
				height: 200px;	
			}
			.container{
				position: relative;
				transform-style: preserve-3d;
				transition: all 1s linear;
			}
			.container:hover{
				transform: rotateX(90.1deg);
			}
			.front,.back{
				position: absolute;
				top: 0;
				left: 0;
				backface-visibility: hidden;
				color: #fff;
				font-size: 40px;
				text-align: center;
				line-height: 200px;
			}
			.front{
				transform: translateZ(100px);
				background: red;
			}
			.back{
				background: green;
				transform: rotateX(-90deg) translateZ(100px);
			}
			
			
		</style>
	</head>
	<body>
		<div id="box">
			<div class="container">
				<div class="front"></div>
				<div class="back"></div>
			</div>
		</div>
	</body>
</html>

看代码不难发现,其实旋转多少度的本质都是一样的,但是旋转90度相对来说在开始旋转的处理要进行在Y轴方向的移动。因为如果不进行Y轴方向的移动,旋转90度后两个面成T字形,而我们需要他们成L字形

同时,再次强调,某个面旋转的同时它的坐标系也会发生变化,所以一定要注意动作的先后顺序。这个可以自己画一个三维坐标系来帮助理解。

最后一点,在进行大盒子的旋转时,大家可能会看到我的代码中:

.container:hover{
				transform: rotateX(90.1deg);
			}

写90deg在firefox是正常的,但是在chrome中你的鼠标放在盒子上会出现闪动的情况,但是你写大于90就可以解决,具体原因暂时不详。


在测试的过程中我使用了最新的chrome浏览器,所以省略了其中的兼容性语句,在实际的使用过程中,一定要加上兼容性语句。

© 著作权归作者所有

zfx2016
粉丝 1
博文 22
码字总数 14027
作品 0
广州
前端工程师
私信 提问
12个炫酷实用的HTML5带发光动画

在网页设计中,很多元素都可以实现发光的动画效果,比如输入框、文字、进度条等等。这些简单的元素加上炫酷的发光动画就会让整个页面戴上一层绚丽的色彩。今天我们就要为大家分享12款炫酷实用...

fishzhang8
2017/09/25
2
0
程序猿必备的10款超炫酷HTML5 Canvas插件

  1.超炫酷HTML5 Canvas 3D旋转地球动画   这是一款基于HTML5 Canvas的3D地球模拟动画,动画以太空作为背景,地球在太空中旋转,同时我们也可以拖拽鼠标来从不同的角度观察地球。另外我们...

爱前端
2017/12/04
0
0
分享10款效果惊艳的HTML5图片特效

在HTML5的世界里,图片特效都十分绚丽,我们在网站上也分享过很多不错的HTML5图片特效,现在我们精选10款效果惊艳的HTML5图片特效分享给大家。 1、HTML5 3D正方体旋转动画 很酷的3D特效 之前...

ruby_chen
2014/03/26
4.4K
1
推荐六款炫酷的HTML5效果插件

1. HTML5 3D图片阴影翻转动画 效果很酷 分享一款很酷的HTML5 3D动画特效,这款3D特效可以为你的图片增加阴影的效果,而且可以让图片在鼠标滑过的时候出现3D翻转的动画效果。这和HTML5 3D动画...

tower1229
2018/06/26
0
0
程序猿必备的10款web前端动画插件十三

  1.jQuery圆形旋转切换菜单 带菜单项描述   jQuery有着无数的插件,菜单插件是jQuery插件中最多的,尤其是CSS3和HTML5的配合,让jQuery菜单变得更加丰富多彩。今天我们要给大家分享一款...

爱码农
2018/08/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

mysql-connector-java升级到8.0后保存时间到数据库出现了时差

在一个新项目中用到了新版的mysql jdbc 驱动 <dependency>     <groupId>mysql</groupId>     <artifactId>mysql-connector-java</artifactId>     <version>8.0.18</version> ......

ValSong
今天
5
0
Spring Boot 如何部署到 Linux 中的服务

打包完成后的 Spring Boot 程序如何部署到 Linux 上的服务? 你可以参考官方的有关部署 Spring Boot 为 Linux 服务的文档。 文档链接如下: https://docs.ossez.com/spring-boot-docs/docs/r...

honeymoose
今天
6
0
Spring Boot 2 实战:使用 Spring Boot Admin 监控你的应用

1. 前言 生产上对 Web 应用 的监控是十分必要的。我们可以近乎实时来对应用的健康、性能等其他指标进行监控来及时应对一些突发情况。避免一些故障的发生。对于 Spring Boot 应用来说我们可以...

码农小胖哥
今天
9
0
ZetCode 教程翻译计划正式启动 | ApacheCN

原文:ZetCode 协议:CC BY-NC-SA 4.0 欢迎任何人参与和完善:一个人可以走的很快,但是一群人却可以走的更远。 ApacheCN 学习资源 贡献指南 本项目需要校对,欢迎大家提交 Pull Request。 ...

ApacheCN_飞龙
今天
5
0
CSS定位

CSS定位 relative相对定位 absolute绝对定位 fixed和sticky及zIndex relative相对定位 position特性:css position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left属性则...

studywin
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部