CSS3 transforms 3D翻开

最新推荐文章于 2023-04-25 09:50:39 发布
最新推荐文章于 2023-04-25 09:50:39 发布
阅读量121 收藏
点赞数
文章标签： xhtml
    • R
    • T
    • L
    • B
 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css3 transforms 3D文字翻开</title>
</head>

<body>
<div class="component">
  <ul class="grid">
    <li class="ot-letter-left"><span data-letter="R">R</span></li>
    <li class="ot-letter-top"><span data-letter="T">T</span></li>
    <li class="ot-letter-right"><span data-letter="L">L</span></li>
    <li class="ot-letter-bottom"><span data-letter="B">B</span></li>
  </ul>
</div>
<style>
ul,li{ list-style:none;}.grid {
    list-style: outside none none;
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
}
.grid li {
    float: left;
    font-size: 12em;
    line-height: 1.5;
    max-height: 290px;
    position: relative;
    text-align: center;
    width: calc(100% / 6);
}
.grid li span {
    color: hsla(0, 0%, 0%, 0.6);
    display: inline-block;
    font-weight: 900;
    line-height: 1;
    perspective: 550px;
    position: relative;
    transform-style: preserve-3d;
    z-index: 1;
}
.grid li span::before, .grid li span::after {
    bottom: 0;
    content: attr(data-letter);
    left: 0;
    line-height: inherit;
    position: absolute;
    right: 0;
    top: 0;
    transition: all 0.3s ease 0s;
    z-index: 2;
}
.grid li span::before {
    color: hsla(0, 0%, 0%, 0.12);
    text-shadow: none;
}
.ot-letter-left {
    background: none repeat scroll 0 0 #e74d3c;
}
.ot-letter-left span {
    text-shadow: 1px 4px 6px #e74d3c, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #e74d3c;
}
.ot-letter-left span::after {
    color: #e74d3c;
}
.ot-letter-left:hover span::after {
    color: #ea6253;
}
.ot-letter-right {
    background: none repeat scroll 0 0 #ea6657;
}
.ot-letter-right span {
    text-shadow: 1px 4px 6px #ea6657, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #ea6657;
}
.ot-letter-right span::after {
    color: #ea6657;
}
.ot-letter-right:hover span::after {
    color: #ed7a6e;
}
.ot-letter-top {
    background: none repeat scroll 0 0 #ee7f72;
}
.ot-letter-top span {
    text-shadow: 1px 4px 6px #ee7f72, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #ee7f72;
}
.ot-letter-top span::after {
    color: #ee7f72;
}
.ot-letter-top:hover span::after {
    color: #f09389;
}
.ot-letter-bottom {
    background: none repeat scroll 0 0 #e95949;
}
.ot-letter-bottom span {
    text-shadow: 1px 4px 6px #e95949, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #e95949;
}
.ot-letter-bottom span::after {
    color: #e95949;
}
.ot-letter-bottom:hover span::after {
    color: #eb6e60;
}
.ot-letter-left span::before, .ot-letter-left span::after {
    transform-origin: 0 50% 0;
}
.ot-letter-left span::before {
    transform: scale(1.08, 1) skew(0deg, 1deg);
}
.ot-letter-left span::after {
    text-shadow: -1px 0 0 hsla(0, 100%, 100%, 0.1), 3px 0 1px hsla(0, 0%, 0%, 0.4);
    transform: rotateY(-15deg);
}
.ot-letter-left:hover span::before {
    transform: scale(0.85, 1) skew(0deg, 20deg);
}
.ot-letter-left:hover span::after {
    transform: rotateY(-40deg);
}
.ot-letter-right span::before, .ot-letter-right span::after {
    transform-origin: 100% 50% 0;
}
.ot-letter-right span::before {
    transform: scale(0.85, 1) skew(0deg, 1deg);
}
.ot-letter-right span::after {
    text-shadow: 1px 0 0 hsla(0, 100%, 100%, 0.1), -3px 0 1px hsla(0, 0%, 0%, 0.4);
    transform: rotateY(15deg);
}
.ot-letter-right:hover span::before {
    transform: scale(0.85, 1) skew(0deg, -20deg);
}
.ot-letter-right:hover span::after {
    transform: rotateY(40deg);
}
.ot-letter-top span::before, .ot-letter-top span::after {
    transform-origin: 50% 100% 0;
}
.ot-letter-top span::before {
    transform: scale(1, 0.95) skew(-4deg, 0deg);
}
.ot-letter-top span::after {
    text-shadow: 0 1px 0 hsla(0, 100%, 100%, 0.1), 0 -3px 1px hsla(0, 0%, 0%, 0.4);
    transform: rotateX(-15deg);
}
.ot-letter-top:hover span::before {
    transform: translateY(-0.05em) scale(1, 0.55) skew(-10deg, 0deg);
}
.ot-letter-top:hover span::after {
    transform: translateY(-0.035em) rotateX(-40deg);
}
.ot-letter-bottom span::before, .ot-letter-bottom span::after {
    transform-origin: 50% 0 0;
}
.ot-letter-bottom span::before {
    transform: scale(1, 1.05) skew(4deg, 0deg);
}
.ot-letter-bottom span::after {
    text-shadow: 0 -1px 0 hsla(0, 100%, 100%, 0.1), 0 3px 1px hsla(0, 0%, 0%, 0.4);
    transform: rotateX(15deg);
}
.ot-letter-bottom:hover span::before {
    transform: translateY(-0.035em) scale(1, 1.2) skew(10deg, 0deg);
}
.ot-letter-bottom:hover span::after {
    transform: translateY(0.045em) rotateX(40deg);
}
</style>
</body>
</html>

 

weixin_33806509
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ROS系列——Python项目下的transform3d库安装问题解决File “versioneer.py“, line 370 LONG_VERSION_PY: Dict[str, str]
曾经也曾立志
04-25 8659
ROS系列——Python项目下的transform3d库安装问题解决File "versioneer.py", line 370 LONG_VERSION_PY: Dict[str, str]
【Transform3D】转换详解（看完就会）
m0_62360527的博客
10-13 4048
3D可以帮助我们实现更好的页面动画效果，我们生活的环境是 3D 的，照片就是 3D 物体在 2D 平面呈现的例子。有什么特点近大远小物体后面遮挡不可见当我们在网页上构建 3D 效果的时候参考这些特点就能产出 3D 效果。1.移动的中心点跟旋转中心点是分开的，transform-origin只是修改旋转的原点，移动位置不变依然是左上角。2.3d旋转是坐标轴是跟随移动的，所以建议当完成某种效果时，先移动后旋转，先旋转改变坐标轴，移动的方向就会有差别。
ROS系列——使用python的transforms3d、numpy库实现四元数、旋转矩阵、欧拉角、轴角等的相互转换
曾经也曾立志
04-25 7809
四元数模块在transforms3d.quaternions里，直接导入即可使用。四元数模块在transforms3d.axangle里，直接导入即可使用。四元数模块在transforms3d.euler里，直接导入即可使用。3.2 欧拉角与旋转矩阵互转。3.1 欧拉角与四元数互转。4.1 轴角与旋转矩阵互转。2.2 四元数与轴角互转。3.3 欧拉角与轴角互转。
安装transform3d
qq_45386324的博客
08-10 4084
1.conda安装 conda install -c owlas transforms3d 2.pip安装 pip install transformers -i https://pypi.tuna.tsinghua.edu.cn/simple
transforms3d-0.4.tar.gz
04-25
Python TransForms3d库
PyPI 官网下载 | transforms3d-0.3.zip
02-11
资源来自pypi官网。 资源全名：transforms3d-0.3.zip
css3超酷3D旋转导航菜单特效
12-13
这是一款使用纯CSS3制作的3D旋转导航菜单特效。该3D旋转导航菜单特效中主要使用了CSS 3D Transforms技术。当鼠标hover菜单项时，菜单项会以3D立方体的方式旋转。
Python库 | transform3d-0.0.4.tar.gz
03-11
python库。 资源全名：transform3d-0.0.4.tar.gz
Transforms in CSS
11-24
Transforms in CSS
transforms3d‑0.3.1‑py2.py3‑none‑any.whl
12-21
python离线安装包，亲测可用
transforms3d, 3维空间变换.zip
09-18
transforms3d, 3维空间变换 Transforms3d在各种几何转换之间转换的代码。将 rotations/zooms/shears/translations 构成仿射矩阵；将仿射矩阵分解为 rotations/zooms/shears/transl
css3图片3d翻开效果
12-21
这是一个css3代码写的网页，鼠标放在图片上，图片产生3d上翻效果，出现图片描述
transform 平面转换（3d）
qq_50260510的博客
03-13 1576
使用transform属性实现元素在空间内的位移、旋转、缩放等效果。是从坐标轴角度定义的。x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。2.transform: translateX(值);3.transform: translateY(值);4.transform: translateZ(值);1.正负均可2.像素单位数值3.百分比。
transform3D转换
她还会来吗的博客
04-16 384
3D转换 三维坐标系 x轴:水平向右 注意:x右边是正值,左边是负值 y轴:垂直向下 注意:y下边是正值,上边是负值 z轴:垂直屏幕 注意:往外面是正值,往里面是负值 主要知识点 3D位移:translate3d(x,y) /* 仅在x轴移动 */ transform:translateX() /* 仅在y轴移动 */ transform:translateY() /* 仅在z轴移动(注意:translateZ一般用px单位)*/ transform:translateZ() /* xyz是不能省略
python transforms3d，不同旋转方式与对应的旋转矩阵
aniclever的博客
11-10 1655
python transforms3d 里的旋转矩阵，
transform 3D 变换
zmooooo的博客
12-10 2950
(一 ) 3D transform中有三个方法         1、rotateX(45deg);         2、rotateY(45deg);         3、rotateZ(45deg);         (二)  perspective属性         perspective的中文意思是透视，视角!         1、我们都知道近大远小的道理，对于没有rotate
深入理解CSS变形transform(3d)
极客神殿
05-20 969
前面的话 本文将详细介绍关于transform变形3D的内容，但需以了解transform变形2D为基础。3D变形涉及的属性主要是transform-origin、transform、transform-style、perspective、perspective-origin、backface-visibility 坐标轴 在了解透视之前，首先要先了解坐标轴。3D变形与2D变形最大的不同就在于其参考的坐标轴不同。2D变形的坐标轴是平面的，只存在x轴和y轴，而3D变形的坐标轴则是x、y、z三条轴组成的立体空间
transforms3d whl
最新发布
05-16
transforms3d是一种用于进行3D变换和旋转的Python库。其中whl是Python的一个安装文件格式，用于在本地安装第三方库。因此，transforms3d whl可以被理解为一个可本地安装的Python库的安装文件。使用这个库，用户可以...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值