CSS环绕球体的旋转文字-3D效果
项目文件结构截图
只需要一个html文件既可:
项目截图:
代码实现原理:
该示例的实现过程很简单,主要是使用了CSS3的透视、3D旋转、位移、渐变、阴影,可以说是一次比较全面的练习。
HTML部分:
<div class="wrapper">
<div class="ball"></div>
<div class="stage">
<div class="text">
这里是文字
</div>
</div>
</div>
CSS部分:
使用到的CSS属性用法:
舞台:
* {
margin: 0;
padding: 0;
}
.wrapper {
width: 400px;
height: 400px;
margin: 200px;
perspective: 800px;
perspective-origin: 50% 50%;
position: relative;
}
.stage {
transform-style: preserve-3d;
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
球体:
.ball {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #ccc;
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
box-shadow: 0px 55px 45px -38px rgba(0, 0, 0, .3);
}
.ball::before {
content: "";
position: absolute;
top: 1%;
left: 5%;
width: 90%;
height: 90%;
border-radius: 50%;
background: -webkit-radial-gradient(50% 0px, circle, #ffffff, rgba(255, 255, 255, 0) 58%);
z-index: 2;
}
文字:
.text {
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
white-space: nowrap;
animation: rotate 5s linear infinite;
backface-visibility: hidden;
}
文字动画:
@keyframes rotate {
from {
transform: rotateY(0deg) translateZ(100px);
}
to {
transform: rotateY(360deg) translateZ(100px);
}
}
效果预览
效果地址:rotate-text-around-the-ballCSS环绕球体的旋转文字-3D效果
注:本文著作权归作者,由demo大师代发,拒绝转载,转载需要作者授权
CSS环绕球体的旋转文字-3D效果的更多相关文章
- [ javascript css clip ] javascript css clip 的奇思妙想之文字拼接效果
语法: clip : auto | rect ( number number number number ) 参数: auto : 对象无剪切 rect ( number number numbe ...
- C#利用GDI+绘制旋转文字等效果
C#中利用GDI+绘制旋转文本的文字,网上有很多资料,基本都使用矩阵旋转的方式实现.但基本都只提及按点旋转,若要实现在矩形范围内旋转文本,资料较少.经过琢磨,可以将矩形内旋转转化为按点旋转,不过需要经 ...
- transform 的旋转 ,3d效果,要添加3d效果的父级加上景深perspective。 3d效果的容器加上 transform-style:preserve-3d。
该技术用于创建一个多维的数据,在这个实例中使用了两个元素用于正面和反面.前面用来放置产品图片,底部用来放置产品信息.默认情况下产品信息隐藏起来,同时鼠标悬停在产品图片上时,隐藏在底部的产品信息在X轴放 ...
- 简单说 用CSS做一个魔方旋转的效果
说明 魔方大家应该是不会陌生的,这次我们来一起用CSS实现一个魔方旋转的特效,先来看看效果图! 解释 我们要做这样的效果,重点在于怎么把6张图片,摆放成魔方的样子,而把它们摆放成魔方的样子,重点在于用 ...
- 使用Three.js实现神奇的3D文字悬浮效果
声明:本文涉及图文和模型素材仅用于个人学习.研究和欣赏,请勿二次修改.非法传播.转载.出版.商用.及进行其他获利行为. 背景 在 Three.js Journey 课程示例中,提供了一个使用 Thre ...
- css实现鼠标经过导航文字偏位效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 网页3D效果库Three.js初窥
网页3D效果库Three.js初窥 背景 一直想研究下web页面的3D效果,最后选择了一个比较的成熟的框架Three.js下手 ThreeJs官网 ThreeJs-github; 接下来我会陆续翻译 ...
- CSS3 03. 3D变换、坐标系、透视perspective、transformZ、transform-style添加3D效果、backface-visibility元素背面可见、动画animation、@keyfarmes、多列布局
1.左手坐标系 伸出左手,让拇指和食指成“L”形,大拇指向右,食指向上,中指指向前方.这样我们就建立了一个左手坐标系,拇指.食指和中指分别代表X.Y.Z轴的正方向.如下图 CSS中的3D坐标系 CSS ...
- 巧用模糊实现视觉的 3D 效果
本文较短,将介绍巧用模糊实现视觉 3D 效果的技巧. 我们都知道,在正常的视觉效果中,离我们越近的通常我们会看的越清晰,而离我们较远则相对没那么清晰~ 我们可以利用清晰与模糊两种状态来构建视差效果.像 ...
随机推荐
- [canvas入坑2]模糊效果
查看效果请到 http://philippica.github.io/ 点击blur 模糊效果比较好的应该是高斯模糊,一个点的值变成了以该点为圆心的一个圆内所有像素的加权平均,权重由二维正态分布计算 ...
- 完美匹配(matching)
完美匹配(matching) 题目描述 给定nn个点,mm条边的无向图G=(V,E)G=(V,E),求出它的完美匹配数量对106+3106+3取模的值. 一个完美匹配可以用一个排列ϕ:V→Vϕ:V→V ...
- jQuery基础 浅析(含基本方法和选择器)
1.jQuery与DOM互相转换 jQuery入库函数:$(document).ready(function(){}) $(function(){}) $(“#btn”):jQuery存储的是DOM对 ...
- ofbiz数据库表结构设计(3)- 订单ORDER
对于订单来说,主要的表就是ORDER_HEADER和ORDER_ITEM.ORDER_HEADER就是所谓的订单头,一条记录代表一条订单. ORDER_PAYMENT_PREFERENCE是订单的支付 ...
- 所驼门王的宝藏(bzoj 1924)
Description Input 第一行给出三个正整数 N, R, C. 以下 N 行,每行给出一扇传送门的信息,包含三个正整数xi, yi, Ti,表示该传送门设在位于第 xi行第yi列的藏宝宫室 ...
- foj 2111 Problem 2111 Min Number
Problem 2111 Min Number Accept: 1025 Submit: 2022Time Limit: 1000 mSec Memory Limit : 32768 KB ...
- HDU 4388 Stone Game II {博弈||找规律}
Stone Game II Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Tot ...
- js2:事件的学习,弹出窗口,状态栏字改变,地图热点的使用
原文发布时间为:2008-11-08 -- 来源于本人的百度文章 [由搬家工具导入] <html> <head> <title>js</title> & ...
- k-mean聚类学习笔记
才发现k-means 聚类这么简单,-_-|| 首先讲一下最朴素的k-means, 首先k-means 是一个迭代过程. 所以我们需要先确定初始,最简单的一个办法就是随机从样本中抽取k个出来,作为初始 ...
- 实现多线程sokect
上一篇文章说到怎样写一个最简单的Java Socket通信,但是在上一篇文章中的例子有一个问题就是Server只能接受一个Client请求,当第一个Client连接后就占据了这个位置,后 续Clien ...