热门标签
当前位置: CSS > 正文
当使用具有matrix3d值的初始关键帧时,用于变换的CSS动画无法正常工作
作者：opred | 2022-11-05 15:09:37
赞
踩
html,javascript,css,css3,css-animations,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix时间戳,在线开发工具,前端开发工具,开发人员工具,站长工具
我需要在div上为属性执行动画scaleZ()并translateZ()使用CSS动画.
当transform属性的动画中的初始和最后一个关键帧值具有类似的"格式" 时,以下代码可以正常工作:
0%是 transform: rotateY(-179deg) scaleZ(2) translateZ(200px);
100%是 transform: rotateY(179deg) scaleZ(2) translateZ(200px);
console.clear();
document.addEventListener('DOMContentLoaded', () => {
let content1 = document.querySelector('#content1');
var computedTransform = window.getComputedStyle(content1).transform;
console.log(computedTransform);
}); @-webkit-keyframes animation {
0% {
/*works*/
-webkit-transform: rotateY(-179deg) scaleZ(2) translateZ(200px);
transform: rotateY(-179deg) scaleZ(2) translateZ(200px);
/*issue*/
/*transform: matrix3d(-0.999848, 0, 0.0174524, 0, 0, 1, 0, 0, -0.0349048, 0, -1.9997, 0, -6.98096, 0, -399.939, 1);*/
}
100% {
-webkit-transform: rotateY(179deg) scaleZ(2) translateZ(200px);
transform: rotateY(179deg) scaleZ(2) translateZ(200px);
}
}
@keyframes animation {
0% {
/*works*/
-webkit-transform: rotateY(-179deg) scaleZ(2) translateZ(200px);
transform: rotateY(-179deg) scaleZ(2) translateZ(200px);
/*issue*/
/*transform: matrix3d(-0.999848, 0, 0.0174524, 0, 0, 1, 0, 0, -0.0349048, 0, -1.9997, 0, -6.98096, 0, -399.939, 1);*/
}
100% {
-webkit-transform: rotateY(179deg) scaleZ(2) translateZ(200px);
transform: rotateY(179deg) scaleZ(2) translateZ(200px);
}
}
#content1 {
-webkit-animation: animation 2s;
animation: animation 2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
/*works*/
-webkit-transform: rotateY(-179deg) scaleZ(2) translateZ(200px);
transform: rotateY(-179deg) scaleZ(2) translateZ(200px);
/*issue*/
/*transform: matrix3d(-0.999848, 0, 0.0174524, 0, 0, 1, 0, 0, -0.0349048, 0, -1.9997, 0, -6.98096, 0, -399.939, 1);*/
}
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/blog/CSS/detail/5693推荐阅读- 如何解决《使用CSS绘制三角形》经验，为你挑选了0个好方法。css,css3,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix时间戳,在线开发工具,前端开发工具,开发人员工具,站长工...
[详细]
赞
踩
- 本篇文章给大家详细分享的是jquery+css3来写出熊猫tv导航的效果，以及代码分享，喜欢的朋友参考下。jquery,css3,熊猫tv导航,css,html,go,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,...
[详细]
赞
踩
- 如何解决《CSS背景渐变在IE8中不起作用》经验，为你挑选了1个好方法。css,jquery,jquery-ui,css3,webkit,firefox,safari,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,...
[详细]
赞
踩
- 如何解决《Webkit边界半径有时会生效》经验，为你挑选了1个好方法。css,webkit,css3,html,safari,chrome,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,u...
[详细]
赞
踩
- 这篇文章主要介绍了利用css3实现进度条效果及动态添加百分比，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧css3,进度条,动态百分比,css,html,php,Dev...
[详细]
赞
踩
- 如何解决《用于重叠式div的CSS3box-shadow》经验，为你挑选了1个好方法。css,css3,html,webkit,容器,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix...
[详细]
赞
踩
- 如何解决《缩略图悬停缩放(放大)w/CSS3和javascriptz轴问题》经验，为你挑选了0个好方法。javascript,zoom,scale,hover,css3,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具...
[详细]
赞
踩
- 如何解决《使用CSS平移3D平滑滚动》经验，为你挑选了0个好方法。html,javascript,jquery,css3,translate3d,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生...
[详细]
赞
踩
- 如何解决《在HTML5页面的中心显示Spinner？》经验，为你挑选了1个好方法。html5,spinner,css3,uiactivityindicatorview,html,ajax,DevBox,在线流程图,编程,编程问答,程序员,开...
[详细]
赞
踩
- 如何解决《选择CSS中的每个第N个元素》经验，为你挑选了4个好方法。css,css-selectors,css3,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix时间戳,在线开发工具...
[详细]
赞
踩
- 如何解决《如何将CSS中的"animation-play-state"初始设置为"暂停"并更改为"正在运行"？》经验，为你挑选了1个好方法。css,css3,css-animati...
[详细]
赞
踩
- 如何解决《已修复的位置不适用于变换CSS属性》经验，为你挑选了1个好方法。css,css3,css-transforms,webkit,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,uni...
[详细]
赞
踩
- 如何解决《使当前日期保持在页面顶部》经验，为你挑选了1个好方法。html,javascript,css,jquery,css3,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix时间戳...
[详细]
赞
踩
- 解决办法：1、保证media书写格式为“@mediascreenand(css样式){}”；2、检查样式是否冲突；3、设置meta标签的viewport属性；4、media后跟的括号中的内容不能写结束符“;”，如果有，需要去掉。css3,m...
[详细]
赞
踩
- 如何解决《跨浏览器CSS3规则》经验，为你挑选了0个好方法。css,css3,webkit,chrome,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix时间戳,在线开发工具,前端开...
[详细]
赞
踩
- 如何解决《Bootstrap3缩略图:正确的帧图像》经验，为你挑选了1个好方法。html,css,css3,twitter-bootstrap,twitter-bootstrap-3,DevBox,在线流程图,编程,编程问答,程序员,开发者...
[详细]
赞
踩
- 如何解决《html5/css3/javascript中功能齐全的文字处理器的可能性？》经验，为你挑选了0个好方法。javascript,html5,css3,html,css,编辑器,安全,服务器,go,DevBox,在线流程图,编程,编程...
[详细]
赞
踩
- 不支持css3的浏览器有IE6、IE7、IE8。而chrome、firefox、safari、opera等主流浏览器都支持css3：Firefox、Opera、IE9和IE10支持部分css3；Chrome和Safari完全支持CSS3。c...
[详细]
赞
踩
- 如何解决《如何使用CSS将内部笔划应用于图像？》经验，为你挑选了1个好方法。css,css3,webkit,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix时间戳,在线开发工具,前端...
[详细]
赞
踩
- 如何解决《CSS中的img上的box-shadow》经验，为你挑选了1个好方法。css,image,css3,webkit,html,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix...
[详细]
赞
踩
相关标签
Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。
