个人中心
文章发布
退出
作者热门文章
- ubuntu12.04环境下使用kvm ioctl接口实现最简单的虚拟机
- Ubuntu 通过无线网络安装Ubuntu Server启动系统后连接无线网络的方法
- 在Ubuntu上搭建网桥的方法
- ubuntu 虚拟机上网方式及相关配置详解
30
4
CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.
这篇CFSDN的博客文章前端:使用CSS3实现酷炫的3D旋转透视由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.
3D动画效果现在越来越普及，已经被广泛的应用到了各个平台，比如阿里云，华为云，webpack官网等。它可以更接近于真实的展示我们的产品和介绍，带来极强的视觉冲击感。所以说，为了让自己更加优秀，css3 3D动画必不可少.
你将学到 。
开始 。
1.CSS3 3D 转换的常用API介绍 。
首先先上一张css 3D的坐标系:
接下来我们来介绍几个常用的api:
旋转 。
相关代码如下:
<style> 。
.d3-wrap { 。
position: relative; 。
width: 300px; 。
height: 300px; 。
margin: 120px auto; 。
/* 规定如何在 3D 空间中呈现被嵌套的元素 */ 。
transform-style: preserve-3d; 。
transform: rotateX(0) rotateY(45deg); 。
transform-origin: 150px 150px 150px; 。
} 。
。
.rotateX { 。
width: 200px; 。
height: 200px; 。
background-color: #06c; 。
transition: transform 2s; 。
animation: rotateX 6s infinite; 。
} 。
。
@keyframes rotateX { 。
0% { 。
transform: rotateX(0); 。
} 。
100% { 。
transform: rotateX(360deg); 。
} 。
} 。
</style> 。
<div class="d3-wrap"> 。
<div class="rotateX"></div> 。
</div> 。
位移(Transform) 。
这里我们需要注意的是为了能看出位移的效果，我们需要在父容器上加如下属性:
.d3-wrap { 。
transform-style: preserve-3d; 。
perspective: 500; 。
/* 设置元素被查看位置的视图 */ 。
-webkit-perspective: 500; 。
} 。
当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。代码如下:
.d3-wrap { 。
position: relative; 。
width: 300px; 。
height: 300px; 。
margin: 120px auto; 。
transform-style: preserve-3d; 。
perspective: 500; 。
-webkit-perspective: 500; 。
transform: rotateX(0) rotateY(45deg); 。
transform-origin: center center; 。
} 。
。
.transformZ { 。
width: 200px; 。
height: 200px; 。
background-color: #06c; 。
transition: transform 2s; 。
animation: transformZ 6s infinite; 。
} 。
。
@keyframes transformZ { 。
0% { 。
transform: translateZ(100px); 。
} 。
100% { 。
transform: translateZ(0); 。
} 。
} 。
3D缩放 。
理论上说以上三种常见变换已经够用了，值得关注的是我们要想让元素呈现出3D效果，以下不可忽视的API也很重要:
2.CSS3 3D 应用场景 。
css 3D主要应用在网站的交互和模型效果上，比如:
3.CSS3 3D 实现一个立方体 。
核心思路就是用6个面去拼接，通过设置rotate和translate来调整相互之间的位置，如下:
具体代码如下:
.container { 。
position: relative; 。
width: 300px; 。
height: 300px; 。
margin: 120px auto; 。
transform-style: preserve-3d; 。
/* 为了让其更有立体效果 */ 。
transform: rotateX(-30deg) rotateY(45deg); 。
transform-origin: 150px 150px 150px; 。
animation: rotate 6s infinite; 。
} 。
.container .page { 。
position: absolute; 。
width: 300px; 。
height: 300px; 。
text-align: center; 。
line-height: 300px; 。
color: #fff; 。
background-size: cover; 。
} 。
.container .page:first-child { 。
background-image: url(./my.jpeg); 。
background-color: rgba(0,0,0,.2); 。
} 。
.container .page:nth-child(2) { 。
transform: rotateX(90deg); 。
transform-origin: 0 0; 。
transition: transform 10s; 。
background-color: rgba(179, 15, 64, 0.6); 。
background-image: url(./my2.jpeg); 。
} 。
。
.container .page:nth-child(3) { 。
transform: translateZ(300px); 。
background-color: rgba(22, 160, 137, 0.7); 。
background-image: url(./my3.jpeg); 。
} 。
。
.container .page:nth-child(4) { 。
transform: rotateX(-90deg); 。
transform-origin: -300px 300px; 。
background-color: rgba(210, 212, 56, 0.2); 。
background-image: url(./my4.jpeg); 。
} 。
.container .page:nth-child(5) { 。
transform: rotateY(-90deg); 。
transform-origin: 0 0; 。
background-color: rgba(201, 23, 23, 0.6); 。
background-image: url(./my5.jpeg); 。
} 。
.container .page:nth-child(6) { 。
transform: rotateY(-90deg) translateZ(-300px); 。
transform-origin: 0 300px; 。
background-color: rgba(16, 149, 182, 0.2); 。
background-image: url(./my6.jpeg); 。
} 。
html结构 。
<div class="container"> 。
<div class="page">A</div> 。
<div class="page">B</div> 。
<div class="page">C</div> 。
<div class="page">D</div> 。
<div class="page">E</div> 。
<div class="page">F</div> 。
</div> 。
我们可以基于上面介绍的，给父元素添加动画或者拖拽效果，这样就可以做成更有交互性的3D方块了，比如置骰子游戏，vr场景，3D相册等等，具体实现我会抽空依次总结出来.
原文地址：https://mp.weixin.qq.com/s/mkUDRpJbW7O0exUeNE3-MA 。
最后此篇关于前端:使用CSS3实现酷炫的3D旋转透视的文章就讲到这里了,如果你想了解更多关于前端:使用CSS3实现酷炫的3D旋转透视的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。
30
4
0
背景: 我最近一直在使用 JPA，我为相当大的关系数据库项目生成持久层的轻松程度给我留下了深刻的印象。 我们公司使用大量非 SQL 数据库，特别是面向列的数据库。我对可能对这些数据库使用 JPA 有一
我已经在我的 maven pom 中添加了这些构建配置，因为我希望将 Apache Solr 依赖项与 Jar 捆绑在一起。否则我得到了 SolarServerException: ClassNotF
interface ITurtle { void Fight(); void EatPizza(); } interface ILeonardo : ITurtle {
我希望可用于 Java 的对象/关系映射 (ORM) 工具之一能够满足这些要求: 使用 JPA 或 native SQL 查询获取大量行并将其作为实体对象返回。 允许在行(实体)中进行迭代，并在对当前
好像没有，因为我有实现From for 的代码, 我可以转换 A到 B与 .into() , 但同样的事情不适用于 Vec .into()一个Vec . 要么我搞砸了阻止实现派生的事情，要么这不应该发
在 C# 中，如果 A 实现 IX 并且 B 继承自 A ，是否必然遵循 B 实现 IX？如果是，是因为 LSP 吗？之间有什么区别吗: 1. Interface IX; Class A : IX;
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
我正在阅读标准haskell库的(^)的实现代码: (^) :: (Num a, Integral b) => a -> b -> a x0 ^ y0 | y0 a -> b ->a expo x0
我将把国际象棋游戏表示为 C++ 结构。我认为，最好的选择是树结构(因为在每个深度我们都有几个可能的移动)。 这是一个好的方法吗？ struct TreeElement{ SomeMoveType
我正在为用户名数据库实现字符串匹配算法。我的方法采用现有的用户名数据库和用户想要的新用户名，然后检查用户名是否已被占用。如果采用该方法，则该方法应该返回带有数据库中未采用的数字的用户名。 例子: “贾
我正在尝试实现 Breadth-first search algorithm , 为了找到两个顶点之间的最短距离。我开发了一个 Queue 对象来保存和检索对象，并且我有一个二维数组来保存两个给定顶点
我目前正在 ika 中开发我的 Python 游戏，它使用 python 2.5 我决定为 AI 使用 A* 寻路。然而，我发现它对我的需要来说太慢了(3-4 个敌人可能会落后于游戏，但我想供应 4-
我正在寻找 Kademlia 的开源实现C/C++ 中的分布式哈希表。它必须是轻量级和跨平台的(win/linux/mac)。 它必须能够将信息发布到 DHT 并检索它。 最佳答案 OpenDHT是
我在一本书中读到这一行:-“当我们要求 C++ 实现运行程序时，它会通过调用此函数来实现。” 而且我想知道“C++ 实现”是什么意思或具体是什么。帮忙!？ 最佳答案 “C++ 实现”是指编译器加上链接
我正在尝试使用分支定界的 C++ 实现这个背包问题。此网站上有一个 Java 版本:Implementing branch and bound for knapsack 我试图让我的 C++ 版本打印
在很多情况下，我需要在 C# 中访问合适的哈希算法，从重写 GetHashCode 到对数据执行快速比较/查找。 我发现 FNV 哈希是一种非常简单/好/快速的哈希算法。但是，我从未见过 C# 实现的
目录 LRU缓存替换策略 核心思想 不适用场景 算法基本实现 算法优化
1. 绪论 在前面文章中提到 空间直角坐标系相互转换 ，测绘坐标转换时，一般涉及到的情况是：两个直角坐标系的小角度转换。这个就是我们经常在测绘数据处理中，WGS-84坐标系、54北京坐标系
在软件开发过程中，有时候我们需要定时地检查数据库中的数据，并在发现新增数据时触发一个动作。为了实现这个需求，我们在 .Net 7 下进行一次简单的演示. PeriodicTimer .
二分查找 二分查找算法，说白了就是在有序的数组里面给予一个存在数组里面的值key，然后将其先和数组中间的比较，如果key大于中间值，进行下一次mid后面的比较，直到找到相等的，就可以得到它的位置。
我是一名优秀的程序员,十分优秀！