首页 技术 正文
技术 2022年11月23日
0 收藏 903 点赞 4,199 浏览 2345 个字

CSS3 Tranform 3D 的应用

一、perspective 属性

1. 作用:

设置元素被查看位置的视图,类似于眼睛到屏幕的距离,一般跟 perspective-origin 共同作用在一个父元素上

  • 属性值 = 屏幕分辩率 * 屏幕和我们眼睛的距离

  • 当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身

  • perspective 属性只影响 3D 转换元素

2. 作用范围

  • 舞台效果: 作用在 transform 属性元素的父元素上,里面的元素都会受到改属性的影响,而且显示的效果跟子元素在父元素的位置有关系。

    perspective: 200px

  • 单个元素:和 transform 属性 共同作用在同一元素中:

    transform: perspective(500px) rotateY(45deg);

二、transform 属性

1. 属性:

  • translateZ: 元素向着它朝的方向(也就是其经过rotate之后) “走出去” 的距离
  • rotateX( xx deg)
  • rotateY( xx deg)
  • rotateZ( xx deg)

三、perspective-origin 属性

1. 作用

设置 3D 元素的基点位置(也就是我们眼睛看的位置),默认就是所看舞台或元素的中心

perspective-origin: 25% 75%;

四、transform-style

1. 作用

利用该属性可以使被转换的子元素(不是后代)保留其 3D 转换:

transform-style: preserve-3d / flat

五、backface-visibility

1. 作用

该属性定义当元素不面向屏幕时(前面有3d元素挡住时)是否可见,可以想象各个面连成一个实体的形状,后面的面会被前面的面挡住看不见。

backface-visibility : hidden / visible;
  • 为每个面设置 backface-visibility: visible,默认值就是 visible

  • 为每个面设置 backface-visibility: hidden

六、例子

<body>
<div class="center showbf">
<div class="cube">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
<div>
</body>
.hidebf div {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.showbf div {
backface-visibility: visible;
-webkit-backface-visibility: visible;
}.center{
margin: auto;
margin-top: 100px;
width: 80%;
height: 300px;
border: 1px solid;
perspective: 200px; /* prespective 和 perspective-origin 一般一起在外层元素上使用 */
perspective-origin: 50% 5%; /* **** */
}.cube {
width: 100px;
height: 100px;
margin: auto;
margin-top: 100px;
transform-style: preserve-3d; /* 让多个子元素之间的 3D 关系像我们想象一样呈现 */
transition: 1s ease;
transform: rotateY(0deg); /* 改变角度看 */
}
.face {
display: block;
position: absolute;
width: 100px;
height: 100px;
border: none;
line-height: 100px;
font-family: sans-serif;
font-size: 60px;
color: white;
text-align: center;
}/* Define each face based on direction */
.front {
background: rgba(0, 0, 0, 0.3);
transform: translateZ(80px);
}
.back {
background: rgba(0, 255, 0, 1);
color: black;
transform: rotateY(180deg) translateZ(80px);
}
.right {
background: rgba(196, 0, 0, 0.7);
transform: rotateY(90deg) translateZ(80px);
}
.left {
background: rgba(0, 0, 196, 0.7);
transform: rotateY(-90deg) translateZ(80px);
}
.top {
background: rgba(196, 196, 0, 0.7);
transform: rotateX(90deg) translateZ(80px);
}
.bottom {
background: rgba(196, 0, 196, 0.7);
transform: rotateX(-90deg) translateZ(80px);
}

上面如果把 div class="cube" 的元素旋转 rotateY(30deg) 其效果如下:

但是如果把 prespective 从 cube 的父元素移到 cube 上,其旋转效果如下:

参考:

好吧,CSS3 3D transform变换,不过如此!


注意

转载、引用,但请标明作者和原文地址

微信扫一扫

支付宝扫一扫

本文网址:https://www.zhankr.net/140723.html

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:875 阅读:5,071
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:806 阅读:3,505
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:565 阅读:4,316
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:730 阅读:4,310
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:4,911
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:3,099
发表评论
暂无评论

还没有评论呢,快来抢沙发~

助力内容变现

将您的收入提升到一个新的水平

点击联系客服

在线时间:8:00-16:00

客服电话

400-888-8888

客服邮箱

ceotheme@ceo.com

扫描二维码

关注微信公众号

扫描二维码

手机访问本站