css 3D轮播图transform-origin不能适配的原因以及解决办法

于 2023-04-28 12:43:24 发布
阅读量485 收藏
点赞数
分类专栏： 前端笔记 文章标签： css 3d 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45062076/article/details/130424004
版权
在iOS16.0及以下版本，同时使用transform和transform-origin属性，特别是transform-origin设置为负值时，会导致元素被放大。两种解决方法是：1)使用transform:translateZ()替代，但多面体渲染会复杂；2)根据放大值调整scale，如设置scale为1-0.179=0.821来抵消放大效果。
摘要由CSDN通过智能技术生成

因为同时设置了transform 和 transform-origin css 属性 并将transform-origin设置为: 50% 50% -179px; -179px导致了元素在ios16.0版本及以下 会被放大。

解决办法1：

不用 transform-origin属性 代替使用 transform:translateZ(91px)的方式实现，这种方式画立方体还好，但是画多面体会变得很复杂 可以用chatGPT尝试一下。

解决办法2：

放大多少就缩小多少 比如设置了 -179px 根据我的项目经验需要 缩小scale为： 1 - 0.179 = 0.821

阿波次嘚
关注
专栏目录
[CSS入门到进阶] 用transform后z-index失效了？总结transform的注意事项！
Hull Qin
08-21 3257
前端开发者一定要知道的transform的知识！如果你不了解这些，就去使用transform这个css，很可能就踩坑了！快来学习一下吧！
前端面试-CSS
wanglu458512的博客
09-19 3050
一、CSS基础 CSS选择器及其优先级 对于选择器的优先级： 标签选择器、伪元素选择器：1 类选择器、伪类选择器、属性选择器：10 id 选择器：100 内联样式：1000 注意事项： !important声明的样式的优先级最高； 如果优先级相同，则最后出现的样式生效； 继承得到的样式的优先级最低； 通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以它们的权值都为 0 ； 样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用
transform-origin兼容各种浏览器写法
weixin_44283589的博客
04-26 571
【代码】transform-origin兼容各种浏览器写法。
3D轮播图.zip
07-17
3D轮播图 方块旋转,备注清晰,demo.html,新手适合学习
transform-origin基点设置"无效"问题
qq_42371913的博客
04-10 4001
想要的旋转效果： <!DOCTYPE html> <html> <head> <title>test document</title> <link rel="stylesheet" type="text/css" href="./test.css"> </head> <body> <di...
3D动画 transform-origin失效的解析
gggg5643的专栏
09-16 2517
我们知道3D动画中perspective的写法有两种，如下： 第一种：perspective(600px) 第二种：perspective: 600px; 这两种方式虽然都能实现透视的效果，但是perspective: 600px 这种写法会使transform-origin失效，使用第二种写法的示例Demo，使用第一种写法的示例Demo，从Demo中我们可以明显的看出,当使用第二种方式的时
CSS3 transiton、transform属性详细介绍（为什么设置transition属性没有生效、translate、rotate、scale、skew详解、transform-orgin）
AIWWY的博客
05-14 3760
目录 transition transition用法 transition属性为什么没有生效 1.直接在CSS中写多个属性改变和在js中直接使用添加类名的方法改变属性。 2.设置了display等于none。 transform 移动translate（2D） 旋转rotate（2D） 移动translate、旋转rotate详解（3D中的详解） 缩放scale 倾斜 skew matrix()函数 变形原点transform-origin 用法：transform-origi.
CSS3 Transform——transform-origin
lhf2009913的专栏
05-15 915
在CSS2.1中，我们的页面都是静态的，网页设计师也习惯把它作为页面效果的设计工具。但往往有些页面效果不只是静态的，比如说，如何实际移动一些元素？如何更改元素的外观——旋转或缩放？ 多年来，Web设计师为了给修改页面的外观，都依赖于图片、Flash或JavaScript才能完成。不过，CSS3将要改变设计师这种思维，进入CSS3时代，借助CSS3就可以轻松倾斜、缩放、移动以及翻转元素。 在20
微信小程序实现3D轮播图效果（非swiper组件）
10-16
在给定的代码片段中，使用了`.stage`类定义了舞台的基本样式，并设置了合适的`perspective`属性值，以及`.wrapper`类来放置图片，并使用了`transform-style: preserve-3d;`属性确保子元素在3D空间中保持3D效果。 ...
实战：移动端适配的最佳解决方案
杏仁技术站
01-08 581
开局一张图理解这张图，需要先了解以下几个概念设备像素: 类似于密度，即每英寸的像素点数量，跟设备有关设备独立像素: 我们可以理解为css像素，跟设备无关设备像素比: 就是devicePi...
3D形式轮播展示图片集，包含球状，螺旋状，支持识别文字或字母
03-22
平面形式的轮播展示照片集略显单调，将图片组合排列成3D 球状，螺旋状或者任意自定义的字母文字形式排布，会让效果显得更立体。 效果动图：https://blog.csdn.net/l17768346260/article/details/105032134
CSS3实现3D魔方翻转网页动画特效特效代码
03-20
CSS3是层叠样式表（Cascading Style Sheets）的第三个版本，它引入了许多新的选择器、伪类、伪元素以及3D变换等功能，使得网页设计者可以创造出更为复杂和立体的布局与动画。 1. **3D变换**：CSS3中的3D变换是实现...
3d轮播图
weixin_44011462的博客
08-27 218
banner效果 页面元素 <body> <div class="container"> <div data-color="radial-gradient(#999,#990100)" class="item left"> <img src="./image/head/16pic_435365_s.png" alt=""> </div> <div data-color="radial-gradient(
3D轮播图
m0_54089303的博客
10-27 1930
主要有平移和旋转构成3d效果的轮播图，小白一只，不足之处还请大家多多指教，代码如下 css代码： *{ padding: 0; margin: 0; } .box{ position: relative; width: 100%; height: 100%; top: 200px; margin: ..
CSS3 -- 3D轮播图
qq_51248309的博客
04-08 5074
css的3d轮播图
css3的transform
最新发布
07-03
CSS3的`transform`属性是一个非常强大的工具，用于在不改变元素位置和尺寸的情况下，对元素进行各种二维或三维变换，从而实现动画效果、响应式设计以及增强用户体验。`transform`属性支持多种转换类型： 1. **旋转...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值