preserve3d css3,CSS3 Flat和preserve-3d两种transform-style属性效果的演示

最新推荐文章于 2022-11-28 16:09:03 发布
最新推荐文章于 2022-11-28 16:09:03 发布
阅读量429 收藏 1
点赞数 1
文章标签： preserve3d css3
本文介绍了一种使用CSS实现的3D变换效果，通过设置不同的旋转角度和透视属性，可以使元素呈现出立体翻转的动画效果。具体包括了对元素应用rotateX变换，以及如何利用animation属性来定义动画循环播放。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

CSS

语言：

CSSSCSS

确定

body {

margin: 0;

}

div {

height: 130px;

width: 250px;

}

h3 {

margin: 0 0 30px;

}

.container {

height: 160px;

margin: 0 auto 1em;

-webkit-perspective: 500px;

perspective: 500px;

}

.top,

.bottom {

position: absolute;

bottom: 0;

-webkit-transform: rotateX(45deg);

transform: rotateX(45deg);

border-radius: 2px;

-webkit-animation: rotate 5s infinite;

animation: rotate 5s infinite;

}

.top {

background: rgba(255, 239, 0, .9);

}

.bottom {

-webkit-transform: rotateX(90deg);

transform: rotateX(90deg);

background: rgba(255, 37, 134, .9);

}

.style-flat .top,

.style-flat .bottom {

-webkit-transform-style: flat;

transform-style: flat;

}

.style-3d .top,

.style-3d .bottom {

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

}

@-webkit-keyframes rotate {

50% {

transform: none;

}

}

@keyframes rotate {

50% {

transform: none;

}

}

许九祀
关注
33-transform-style:preserve-3D；(3D转换)，动画animation
qq_47462646的博客
12-24 611
取值：像素单位值，数值一般在800-1200px（透视和3D没有关系，只是为了看Z轴）空间：从坐标轴的角度定义的，x,y,z三条坐标轴构成了一个立体空间，transform属性不止能实现2D转换，也可以制作3D立体效果。方向旋转，负数表示沿对应坐标轴逆时针方向旋转。（取值为正负数均可，像素单位值px，百分比%）X轴正值是从上往下旋转,负值是从下往上旋转；Y轴正值是从左往右旋转,负值是从右往左旋转；Z轴正值是顺时针旋转,负值是逆时针旋转。透视也叫视距，人眼睛到屏幕的距离。属性：（添加给父级）
css3的属性transfrom的值preserve-3d和perspective有什么区别？
最新发布
王铁柱666的博客
05-04 136
属性的一个函数，用于给 3D 转换元素设置一个透视效果。透视效果可以模拟人眼观察 3D 对象时的视觉感受，使得远离观察者的对象看起来更小，而靠近观察者的对象看起来更大。在使用这两个特性时，你通常需要结合其他 CSS3 转换和动画属性来创建复杂的 3D 效果。是与 3D 转换相关的值，但它们在用途和行为上有一些区别。属性允许你对元素进行 2D 或 3D 转换。属性定义了嵌套元素是如何在 3D 空间中呈现的。属性的一个值，而不是。
由-webkit-transform-style:preserve-3d;所想
aizhanqian5077的博客
06-12 367
看一个用css3写幻灯片的demo用到了这么几个属性 .demo{ -webkit-transform-style:preserve-3d; -webkit-perspective:800px; -webkit-transform-origin:left; backface-visibility:hidden; } 一时半会儿理解不了...
preserve-3d
qq_39817708的博客
09-13 1177
舞台层   景深层 perspective: 1600px;   形变中心点perspective-origin: 0px 0px;   形变中心点transform-origin: center center; 3d中心层 就是围绕运动的层 下面用几个例子来介绍3d动画 例1正方体 代码          魔方              body{     
html 立方体切换效果,html – CSS3 – 3D立方体 – IE变换风格：保留-3d解决方法...
weixin_28874917的博客
06-05 172
在浏览IE10的developer blog后,我发现它们不支持preserve-3d设置.我发现这个立方体最初是由Paul Hayes制作的,它使用触摸屏而且非常受欢迎.Altough preserve-3d设置是一个已知的问题,我无法实现建议的工作,因为它似乎在父级中没有转换属性来实际应用于子元素.这是我到目前为止简化的链接：http://jsfiddle.net/cC4Py/1/CSS：.v...
transform-style: preserve-3d「In CSS」
Dong's Blog
01-09 5884
transform-style有两个值 flat 与 preserve-3d，flat 为默认值。 transform-style: preserve-3d 能使在同一位置的元素中心点交汇。
CSS3中设置3D变形的transform-style属性详解
12-13
他主要有两个属性值：flat和preserve-3d。 transform-style属性的使用语法非常简单： CSS Code复制内容到剪贴板 transform-style: flat | preserve-3d  其中flat值为默认值，表示所有子元素在2D平面呈现。...
CSS3 3D立方体效果示例－transform也不过如此
09-27
在本文中，我们将深入探讨CSS3的`transform`属性以及与3D变换相关的其他属性，如`perspective`、`transform-style`和`transform-origin`。 首先，`transform`属性允许我们对元素进行平移（translate）、缩放（scale...
【45】CSS3 （4）——新增属性③3D 转换
倏存的博客
04-09 1148
⚪透视属性⚪3D 旋转 ⚪3D 位移⚪transform-style属性⚪3D 正方体案例⚪浏览器兼容
【CSS】transform-style: preserve-3d —— 旋转的轮播图
菜鸟码农
04-18 2301
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>旋转轮播图</title> <style type="text/css"> body { perspective:2500px; /*视角*/ } se...
css preserve-3d 使用
阿臻
07-20 559
指定了观察者与z=0平面的距离，可以想象是我们和舞台的距离，如果我们离舞台更近是不是看到的东西越少，东西越大呢，如果我们离舞台越远看到的越多，演员也随之越小。可以把拥有这个属性的盒子想象成一个舞台，里面的子元素都是演员，他们可以随意表演，我们可以通过舞台观看。设置元素的子元素是位于3D空间中还是平面中。加不加无所谓的，它只是规定了我们和舞台的距离。是应该加在父盒子上面的。,舞台也就是3d的，...
CSS3 3D的正方体效果(transform-style: preserve-3d)
houyanhua1的专栏
03-23 2349
demo.html：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt;
preserve3d css3,关于transform-style: preserve-3d;的问题
weixin_34327476的博客
08-04 463
该楼层疑似违规已被系统折叠隐藏此楼查看此楼今天在学这个3D属性的时候，想做一个旋转木马的效果的，给容器加transform-style: preserve-3d;属性之后，图片就模糊了，没加之前是很清晰的(因为没有加z-index，所以没加的时候，后面的图片会顶在前面)，我没有缩放，所以图片太小这种问题不存在，而且我现在是只差这一个属性就导致了图片模糊，百度也没有找到解决的办法，只能在贴吧求大神...
深入探究CSS3 transform-style:preserve-3d
weixin_45696837的博客
10-17 3912
这些都是我参照文档以及自己试出来的理解。 至于对不对嘛，还要实践才知道。 来看嘛，打都打开，也许会有意想不到的收获呢！ 默认值flat没什么好说的。 preserve-3d：指定子元素定位在三维空间内。 上效果解释，说服力满满滴！ <style> body { perspective: 800px; perspective-origin: 250px 300px; } .wrapper { position: relati
css3——3D动画、transform-style：preserve-3d、transform：perspective()、perspective-origin
zyz00000000的博客
09-30 8072
1. transform-style：preserve-3d，该属性设置在父级元素中，它的子级元素具有3d效果 注意：设置了该属性，就不能防止子级元素溢出，即不能设置overf：hidden属性；如果设置了overflow：hidden，那么transform-style：preserve-3d就无效。 2. transform：perspective；景深，观察者到物体的距离；单位：px，比...
CSS3中perspective、perspective-origin、transform-style: preserve-3d和transform中的rotate详细解释、纯CSS3动画正方体贴图
AIWWY的博客
05-06 921
目录 transform-style: preserve-3d perspective perspective-origin rotate translate 纯CSS3动画正方体贴图小项目链接和GIF图片 transform-style: preserve-3d 属性规定如何在 3D 空间中呈现被嵌套的元素，有flat和preserve-3d两种参数，默认为flat表示子元素将不保留3d位置（注意只有子元素会实现3d效果），preserve-3d相反（理解为设置后元素之间的覆盖关系将不会根
关于transform-style: preserve-3d；设置后，无效果问题
weixin_52096382的博客
11-28 976
关于transform-style: preserve-3d；设置后，无效果问题
看图说话， 详解perspective 和 preserve-3d
画漫画的程序员∙苏南
03-21 1531
点击上方“IT平头哥联盟”，选择“置顶或者星标”一起进步～本文作者：安佳，360 搜索事业部的前端开发工程师，W3C CSS 工作组成员。今天和大家分享两个和 CSS 3D 相关的属性/值...
区别一下preserve-3d和 perspective透视
皮蛋solo粥的博客
04-08 833
相同点： 他俩都写在父元素上，作用于父元素里面的所有子元素。 不同点： preserve-3d：是开启3d空间，让元素脱离2d平面，让我们看起来有立体的效果。 perspective：是透视效果，很多人会误以为透视就是3d，其实不是的，透视达到了远小近大的效果，从而让人误认为是3d，但这只是欺骗了你的眼睛，实际上还是2d平面，透视一般作用于所有设置了Z轴位移的子元素，譬如translateZ——transform:translateZ(600px);因为Z轴就是距离屏幕的坐标轴，所以透视是为Z轴
CSS3D技术实现动态3D效果演示
3. `transform-style`: 在3D空间中如何保持子元素的变换。常用的值有`flat`（在二维平面内进行变换）和`preserve-3d`（保持3D变换）。 4. `perspective`: 定义观察者与z=0平面的距离，用于模拟透视效果。 5. `...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值