CSS 3D旋转效果

俗称3D变换，指基于3D立体的角度来设置盒子。比如将盒子设置为立方体。3D的效果跟2D是一样的，有平移和旋转，不同点在于，2D只有x轴和y轴，3D会多一个z轴，用于表示立体。

3D的效果通过需要远距离观察才能看出立体效果，因为距离太近，我们只能看出平面的2D效果，这就需要在设置3D变换效果之前，需要先设置景深（一般来说景深设置在900px-1200px之间就可以）：

perspective: 1200px; /* 在父元素中使用,设置景深 */

我们还需要设置从屏幕的哪个点来观察屏幕内部的3d效果：

perspective-origin: 50% 50%; /* origin是原点，width和height各设置50% */

对于3D的效果来讲，同样具有平移和旋转，但因为平移和旋转同样适用于2D效果，所以我们还需要告诉浏览器当前场景是在3D效果下进行的：

transform-style：preserve-3d; /* 表示在3d空间中展示 */

旋转

旋转指让盒子绕着x轴或y轴进行旋转。语法：

transform: rotateX(旋转的角度); /* 绕着x轴旋转多少角度 */
transform: rotateY(旋转的角度); /* 绕着y轴旋转多少角度 */
transform: rotateZ(旋转的角度); /* 绕着z轴旋转多少角度 */

平移

平移是让盒子在水平方向或垂直方向进行移动。语法：

transform: translateX(像素值); /* 水平方向移动，正值向右，负值向左 */
transform: translateY(像素值); /* 垂直方向移动，正值向下，负值向上 */
transform: translateZ(像素值); /* z轴方向移动，正值距离眼睛更近，负值距离眼睛更远 */
transform: translate3d(水平方向像素值, 垂直方向像素值, z轴方向像素值); /* 复合写法 */

因为2D效果并不明显，所以就要利用3D效果制作立方体：

<style>.box{width: 300px;height: 300px;border: 1px solid black;margin: 50px auto;position: relative;/* 景深 */perspective: 1200px;/* 过渡元素：css属性 时间 */transition: all 5s;/* 从2d变3d */transform-style:preserve-3d; /* origin是原点，width和height各设置50% */perspective-origin: 50% 50%;}.box>div{width: 100px;height: 100px;position:absolute;top: 0;right: 0;left: 0;bottom: 0;margin: auto;text-align: center;line-height: 100px;/* 透明度 */opacity: 0.5;}.box div:nth-child(1){bottom:200px;background-color: blue;transform: rotateX(-90deg);transform-origin:bottom;}.box div:nth-child(2){left: 200px;background-color: pink;transform: rotateY(-90deg);transform-origin: left;}.box div:nth-child(3){right: 200px;transform: rotateY(90deg);transform-origin:right;background-color: #dadada;}.box div:nth-child(4){bottom: -200px;transform:rotateX(90deg);transform-origin: top;background-color: blueviolet;}.box div:nth-child(5){background-color: skyblue;}.box div:nth-child(6){transform: translateZ(100px);background-color: lawngreen;}.box:hover{transform: rotateY(180deg) rotateX(360deg);}</style>
</head>
<body><div class="box"><div class="box1">1</div><div class="box2">2</div><div class="box3">3</div><div class="box4">4</div><div class="box5">5</div><div class="box6">6</div></div>

PS：这里本来可以不用伪类选择器的，我忘了已经给每个小div加了class。

这就是用3D旋转实现的效果，鼠标放在黑色边框里会开始旋转，移开鼠标会旋转回原本的状态。

PS：在把旋转transform: rotateY(180deg) rotateX(360deg);的两个数值设置成更加大的数值时就会出现十分鬼畜的一幕。

CSS 3D旋转效果相关推荐

CSS图片3D旋转效果
页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...
CSS实现鼠标跟随 3D 旋转效果，让交互活起来
一淘模板(56admin.com)给大家介绍一下如何使用CSS实现有意思的鼠标跟随 3D 旋转效果,让交互更加生动,希望对大家有所帮助! 今天,群友问了这样一个问题,如下所示的鼠标跟随交互效果,如何实 ...
让交互更加生动！巧用CSS实现鼠标跟随 3D 旋转效果
简单分析一下,这个交互效果主要有两个核心: 借助了 CSS 3D 的能力元素的旋转需要和鼠标的移动相结合本人简单的说一下如何使用纯 CSS 实现类似的交互效果,以及,借助 JavaScript 绑 ...
css实现3D旋转效果
[需求描述]css实现3D旋转效果,本例摘自网友(css3 3d旋转风车效果). <!DOCTYPE html> <html lang="en"><h ...
CSS 3D转换和动画（animation）
一.空间转换 3D 3D坐标系 3D 坐标系比2D 多了一个Z轴. X 轴往右越大,是正值, 否则反之 Y 轴往下越大,是正值,否则反之 Z轴 (指向我们)越大,是正值,否则反之 3D位移完整写 ...
html元素做3d变换,CSS 3D变换
1.3D transform中有下面这三个方法: rotateX( angle ) rotateY( angle ) rotateZ( angle ) 意思是分别绕着X/Y/Z轴进行旋转. 学过一部分 ...
CSS 3D动态立体图形
CSS 3D动态立方体 1. HTML <body><div class="box"><div class="test"> ...
10个超漂亮的CSS 3D特效
在油管上看到了10个超漂亮的CSS 3D特效,遂分享给大家,有写是css+JavaScript实现的. 3D Slicebox 在3D立方体上寻找图像幻灯片?查看演示图像转换与THREE.js 结 ...
Android做3D旋转动画,Android编程实现3D旋转效果实例
本文实例讲述了Android编程实现3D旋转效果的方法.分享给大家供大家参考,具体如下: 下面的示例是在Android中实现图片3D旋转的效果. 实现3D效果一般使用OpenGL,但在Android平 ...

CSS 3D旋转效果

旋转

平移

CSS 3D旋转效果相关推荐

最新文章

热门文章