CSS:CSS3中perspective的应用，实现旋转木马效果

最新推荐文章于 2024-08-21 08:34:25 发布
最新推荐文章于 2024-08-21 08:34:25 发布
阅读量3.1k 收藏 3
点赞数
分类专栏： 前端 文章标签： css3 Javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jearbilove/article/details/26099473
版权
本文介绍了CSS3中的perspective属性，用于创建3D视角效果，结合rotateY属性实现旋转木马的视觉体验。通过示例和代码解释，详细阐述了如何设置图片的translateZ和rotateY属性，使九张图片围绕中心点形成一个圆形布局。通过实践加深对CSS3 3D变换的理解。
摘要由CSDN通过智能技术生成

今天复习了一下CSS3，CSS3透视效果：perspective

perspective也可以理解为视角，就是你从哪个角度去看物体，你的角度不同物体呈现出的样子是不一样的，横看成林侧成峰嘛。要是没有视角这个东东，浏览器里面不管你怎么旋转拉伸都没有一丁点的3D感~

CSS3中的3D坐标系如下图所示：




X,Y轴就跟普通的直角坐标系一样，Z轴垂直于你的屏幕，当你在Z轴上移动的时候物体就会放大缩小了。


perspective:number

perspective属性使用起来非常方便，后面直接跟视距就好了，比如：perspective:500,不用带上px后缀，不过在不同的浏览器中webkit,o等前缀还是要的，毕竟大统一时代还没有来临嘛~

理解perspective有一点非常关键，就是你作为视窗的物体，不能同时还是被观察的，否则可能达不到你想要的效果
最低0.47元/天 解锁文章
黑色的咖啡
关注
专栏目录
css3 3D旋转-旋转木马的实现
weixin_46385734的博客
03-01 1734
3D旋转-旋转木马特效 首先给大家展示一下效果和代码。 在这里插入代码片 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale...
旋转相册
qq_45141428的博客
12-14 285
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flash</title> <style> body{ perspective: 1000px; } section{ position: relative; width: 300px; height:
Perspective.js 开源项目教程
最新发布
gitblog_00116的博客
08-21 256
Perspective.js 开源项目教程 perspective.jsTransforms the perspective of an image and draw it on a canvas项目地址:https://gitcode.com/gh_mirrors/pe/perspective.js 1. 项目的目录结构及介绍 Perspective.js 项目的目录结构如下： perspec...
css3实现一个旋转木马
weixin_58855537的博客
10-03 446
这是html部分，放上8个图片 <section class="box"> <div><img src="img/iu.png" alt=""></div> <div><img src="img/iu2.png" alt=""></div> <div><img src="img/lin.png" alt=""></div> <div>..
纯CSS3实现旋转木马
diaoqinxian6438的博客
09-23 280
test.html： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>CSS3旋转木马</title> <link type="text/css" rel='stylesheet' href=...
旋转木马
qq_43144059的博客
02-03 914
旋转木马 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>旋转木马</title> <style> body {
HTML5+css3：3D旋转木马效果相册
01-21
这篇博客的目的是因为上篇HTML5 CSS3专题 诱人的实例 CSS3打造百度贴吧的3D翻牌效果中有个关于CSS 3D效果的比较重要的知识点没讲到，就是perspective和tranlateY 效果图：嘿嘿，我把大学毕业时的一些照片，做成旋转...
css3-3d-transform:90行代码实现图片旋转木马3D效果
05-21
Css3-3d-transform__实现图片旋转木马3D效果</ title > </ head > < style > # doc { height : 600 px ; position : relative; overflow : hidden; background-color : # ddd ; } # stage { ...
CSS3 transform实现图片旋转木马3D
10-20
在本文中，我们将深入探讨如何使用CSS3的`transform`属性来实现一个令人惊叹的3D图片旋转木马效果。CSS3的`transform`特性为Web开发者提供了强大的能力，可以对元素进行平移、旋转、缩放和扭曲等多种变换，从而创造...
css 旋转木马简单实现
黄大仙
08-17 553
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { perspective: 800px; transform-style: preserve-3d; transform: rotateX(-20deg); } secti.
CSS3实现酷炫的3D旋转透视效果
11-21
CSS3实现酷炫的3D旋转透视 3D动画效果现在越来越普及，已经被广泛的应用到了各个平台，比如阿里云，华为云，webpack官网等。它可以更接近于真实的展示我们的产品和介绍，带来极强的视觉冲击感。所以说，为了让自己更加优秀，css3 3D动画必不可少。 你将学到 CSS3 3D 转换的常用API介绍 CSS3 3D 应用场景 CSS3 3D 实现一个立方体   开始 1.CSS3 3D 转换的常用API介绍 首先先上一张css 3D的坐标系：   接下来我们来介绍几个常用的api： 旋转 rotateX() rotateY() rotat
前端-css3，旋转木马效果
tl110110tl的专栏
05-01 387
CSS3旋转木马效果 3d+动画
html旋转_css3旋转木马
weixin_39531229的博客
12-01 109
记得点击蓝字关注我们哦！css3旋转木马DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title...
css 3D 旋转木马
weixin_43910988的博客
07-09 661
* 修订每一个div的位置 *//* 通过JS方式动态加载 *//* 添加动画 *//* 鼠标悬停则停止 */
CSS3 3D transform实现旋转木马效果
nullpointer_ex的博客
04-23 2257
3D transform中有下面这几个属性：rotateX(deg),rotateY(deg),rotateZ(deg)分别代表围绕X轴，Y轴，Z轴旋转。translateX(px), translateY(px), translateZ(px)分别代表围绕X轴，Y轴，Z轴位移。transform-style: 使被转换的子元素保留其 3D 转换。perspective：定义 3D 元素距视图的距...
CSS3 旋转木马图片动画(transform+Animation)
所以的博客
08-31 630
知识点： - perspective 透视效果 - transform-style：preserve-3d 3D呈现效果 （添加在父类） - animation：name time infinite(动画无限循环播放) - transform：rotate translate
CSS3--旋转木马案例
weixin_65635437的博客
06-05 303
CSS3--旋转木马案例
CSS3-透视效果
weixin_44486539的博客
02-02 5450
CSS3 中的 perspective 属性用于设置元素距视图的距离，单位为像素（px）； 设置了 perspective 属性的子元素可以实现透视效果（就是由远及近的效果），设置该属性的元素本身没有。 透视只是视觉上呈现出有近大远小的效果， 实际上还是在一个平面中；透视并不是真正的 3D 盒子， 无法构成真正 3D 空间。 示例： CSS: .box { width: 400px; he...
CSS中的transform-style和perspective，如何结合使用产生旋转木马效果
03-28
要产生旋转木马效果，需要使用CSS的transform-style和perspective属性。 1. 首先，在父元素上添加transform-style: preserve-3d;，让子元素位于三维空间中。 2. 然后，在父元素上添加perspective属性，指定透视距离，产生立体效果。 3. 接着，在子元素上设置transform: rotateY(angle)，使子元素绕Y轴旋转，产生旋转木马效果。 以下是示例代码： HTML代码： ``` <div class="carousel"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> <div class="item">Item 4</div> <div class="item">Item 5</div> </div> ``` CSS代码： ``` .carousel { width: 400px; height: 300px; margin: 0 auto; position: relative; transform-style: preserve-3d; perspective: 1000px; } .item { position: absolute; width: 300px; height: 200px; background-color: #ccc; text-align: center; line-height: 200px; font-size: 24px; transition: transform 1s; } .item:nth-child(1) { transform: rotateY(0deg) translateZ(200px); } .item:nth-child(2) { transform: rotateY(72deg) translateZ(200px); } .item:nth-child(3) { transform: rotateY(144deg) translateZ(200px); } .item:nth-child(4) { transform: rotateY(216deg) translateZ(200px); } .item:nth-child(5) { transform: rotateY(288deg) translateZ(200px); } .carousel:hover .item { transform: rotateY(36deg); } ``` 在这个示例中，旋转木马的父元素是一个div.carousel，子元素是div.item。在.carousel上设置了transform-style: preserve-3d;和perspective: 1000px;，使子元素位于三维空间中，并产生立体效果。在.item上设置了transform: rotateY(angle)和transition: transform 1s;，使子元素绕Y轴旋转，并且在1秒内完成旋转。在.carousel:hover .item中，设置了旋转的角度为36度，使旋转更加流畅。 通过这种方式，就可以使用CSS的transform-style和perspective属性，结合使用产生旋转木马效果了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值