• 关于

    transform-style

    的搜索结果

回答

第一种:<!DOCTYPE html> <html> <body> <style> #star-five { margin: 50px 0; position: relative; display: block; color: red; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid red; border-left: 100px solid transparent; -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); } #star-five:before { border-bottom: 80px solid red; border-left: 30px solid transparent; border-right: 30px solid transparent; position: absolute; height: 0; width: 0; top: -45px; left: -65px; display: block; content: ''; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); } #star-five:after { position: absolute; display: block; color: red; top: 3px; left: -105px; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid red; border-left: 100px solid transparent; -webkit-transform: rotate(-70deg); -moz-transform: rotate(-70deg); -ms-transform: rotate(-70deg); -o-transform: rotate(-70deg); content: ''; } </style> <li id='star-five'> </li> </body> </html>第二种:背景图片加法 <!DOCTYPE html> <html> <body> <style> li{ background:url(http://files.jb51.net/file_images/article/201311/20131107091019.jpg?201310792652) no-repeat ; padding-left:25px; height:250px; } </style> <li id='star-five'> </li> </body> </html>
吴孟桥 2019-12-02 02:29:37 0 浏览量 回答数 0

问题

QTableWidget修改表头颜色的代码为什么只在QMainWindow中有效?-服务报错

"<span style=""widows:2;text-transform:none;background-color:#ffffff;text-indent:0px;display:inline !...
montos 2020-05-31 15:27:47 0 浏览量 回答数 1

问题

click触发问题

自己写了一个menu点击变成返回的div我为#menu-back绑定了click事件动画也能出来,只不过鼠标点击的时候只有精确地点到menu下面的3个div才能触发。(而我想只要点击menu就可以触发变化)答案已经有了。我写JS的时候多绑了...
杨冬芳 2019-12-01 20:08:02 822 浏览量 回答数 1

回答

没太懂为什么又在事件里绑了一次事件,直接写if-else逻辑就可以了var menuBack = document.getElementById('menu-back'); var meunBack1 = document.getElementById('menu-back1'); var menuBack3 = document.getElementById('menu-back3'); menuBack.addEventListener('click',$menuBack,true); function $menuBack(){ if(menuBack.className === 'menu-back'){ meunBack1.style.transform = 'translate(0,10.5px) rotate(-45deg)'; meunBack1.style.width = menuBack3.style.width = '15px'; menuBack3.style.transform = 'translate(0,-10.5px) rotate(45deg)'; menuBack.className = 'menu-back active'; } else if(menuBack.className === 'menu-back active'){ meunBack1.style.transform = ''; meunBack1.style.width = menuBack3.style.width = ''; menuBack3.style.transform = ''; menuBack.className = 'menu-back'; } }
杨冬芳 2019-12-02 02:55:41 0 浏览量 回答数 0

回答

既然想要CSS3实现,那我就做一下吧都是运用CSS3 3D变换的知识,设置perspective,rotate3D,translateXY等属性就好了,需要花点时间慢慢调整 效果预览: 代码可以做参考下,按照自己的需求优化和修改 <style> ul{ list-style:none; } .stage{ position:relative; margin:100px; } .desk{ background:#eae1dc; width:500px; height:20px; position:absolute; bottom:-35px; border-bottom:2px solid #f5ebe9; z-index:-1; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .desk:after{ content: ""; background: #F2EDEA; width: 574px; position: absolute; height: 65px; -webkit-transform: perspective(300px) rotateX(50deg) translateX(-42px) translateY(-90px); transform: perspective(300px) rotateX(50deg) translateX(-42px) translateY(-90px); } .desk-shadow{ position: absolute; bottom: -100px; z-index: -2; background: none; width: 510px; height: 65px; box-shadow: 0 56px 63px rgba(0,0,0,0.3); -webkit-transform: perspective(300px) rotateX(33deg) translateX(3px) translateY(-90px); transform: perspective(300px) rotateX(33deg) translateX(3px) translateY(-90px); } .books-list li{ position:relative; display:inline-block; margin-left:12px; width:130px; height:134px; z-index:2; overflow-y:hidden; overflow-x:visible; } .books-list li img{ width:100px; height:134px; } .books-list li:after{ content: ""; position: absolute; overflow: hidden; right: 28px; bottom: 0px; width: 25px; height: 129px; background: rgba(0,0,0,0.4); box-shadow: 0 0 5px rgba(0,0,0,0.4); -webkit-transform: perspective(300px) rotateX(29deg) rotateY(-61deg) rotateZ(-11deg) translateX(8px) translateY(8px); transform: perspective(300px) rotateX(29deg) rotateY(-61deg) rotateZ(-11deg) translateX(8px) translateY(8px); z-index: -1; } </style> <body> <div class="stage"> <ul class="books-list"> <li><img src="http://jjckb.xinhuanet.com/2016-05/20/135374404_14637120163591n.jpg"></li> <li><img src="http://jjckb.xinhuanet.com/2016-05/20/135374404_14637120163591n.jpg"></li> <li><img src="http://jjckb.xinhuanet.com/2016-05/20/135374404_14637120163591n.jpg"></li> </ul> <div class="desk"></div> <div class="desk-shadow"></div> </div> </body>
杨冬芳 2019-12-02 02:44:59 0 浏览量 回答数 0

回答

使用css3 transform 方法硬件加速 -ms-transform:translate3d(0,0,0); /* IE 9 / -moz-transform:translate3d(0,0,0); / Firefox / -webkit-transform:translate3d(0,0,0); / Safari 和 Chrome / -o-transform:translate3d(0,0,0); / Opera */使用到动画的样式设置如下样式,可解决 https://www.cnblogs.com/xzma/p/9884617.html -webkit-backface-visibility: hidden;(设置进行转换的元素的背面在面对用户时是否可见:隐藏) // 如果有3d加上下面句 ,没有可省略 -webkit-transform-style: preserve-3d; (设置内嵌的元素在 3D 空间如何呈现:保留 3D ) eg: .num { -webkit-backface-visibility: hidden }
DM。 2020-06-01 15:03:44 0 浏览量 回答数 0

问题

请问手机端如何用js来控制animation的duration时间?

描述:想用js来控制动画的播放速度。默认动画一直在执行,但是如果点击的话,根据点击次数的增加,动画的速度逐渐增加。问题:在浏览器模拟器上动画可以增加,可是在手机上用js设置的时间不起作用。直接设置动画时间,或者设置动画名称和动画时间都不起作...
a123456678 2019-12-01 20:16:52 1329 浏览量 回答数 1

问题

火狐浏览器中给元素添加动画,执行完毕后,清除动画,再次添加无效,在chrome下正常 :报错

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &...
kun坤 2020-06-07 10:14:03 1 浏览量 回答数 1

问题

火狐浏览器中给元素添加动画,执行完毕后,清除动画,再次添加无效,在chrome下正常-服务报错

"<pre class=""brush:html; toolbar: true; auto-links: false;""><!DOCTYPE html> <ht...
montos 2020-05-31 10:21:25 0 浏览量 回答数 1

问题

火狐浏览器中给元素添加动画,执行完毕后,清除动画,再次添加无效,在chrome下正常 - 服务报错

"<pre class=""brush:html; toolbar: true; auto-links: false;""><!DOCTYPE html> <ht...
montos 2020-05-31 18:55:56 1 浏览量 回答数 1

回答

这种问题一般都是根据经验积累的吧,没看到有官方的文档,倒是从网上搜到一份,供参考。不可继承的:display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。所有元素可继承:visibility和cursor。内联元素可继承:letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。终端块状元素可继承:text-indent和text-align。列表元素可继承:list-style、list-style-type、list-style-position、list-style-image。表格元素可继承:border-collapse。
a123456678 2019-12-02 02:20:43 0 浏览量 回答数 0

问题

如何用jquery控制div依次执行动画

<!DOCTYPE html> <html> <head> <title>demo</title> </head> <style> *{ ...
a123456678 2019-12-01 20:23:27 1010 浏览量 回答数 1

问题

智能语音交互常见问题是什么?

阿里云智能语音服务常见问题 服务开通问题SDK调用问题音频格式问题服务使用问题 1. 服务开通问题 访问阿里云官网—>数加—> 智能语音交互。点击获取使用资格,注册信息。等待审核。审核通过后会收到邮件和...
nicenelly 2019-12-01 21:03:54 1205 浏览量 回答数 0

回答

Do not use the Microsoft vendor prefix ("-ms-") before the backface-visibility property. It is supported unprefixed in Internet Explorer 10 and later.根据Modern IE的资料,不被支持的是transform-style: preserve-3d;。IE全系列均不支持preserve 3d,到了Edge才被支持。Internet Explorer 10 does not support the preserve-3d keyword. You can work around this by manually applying the parent element’s transform to each of the child elements in addition to the child element’s normal transform.
a123456678 2019-12-02 02:05:14 0 浏览量 回答数 0

问题

词表管理API是什么?

关键词管理接口文档 1、 创建关键词词表 1.1 地址 协议URL方法HTTPShttps://nlsapi.aliyun.com/asr/custom/keyword_listsPOST 1.2 请求 bo...
nicenelly 2019-12-01 21:01:37 1102 浏览量 回答数 0

回答

可以设置left,还可通过margin,padding等 举个例子 " style="box-sizing: border-box; margin: 0px; padding: 0px; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(51, 51, 51); font-size: 18.6773px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255);">
XiaozhouTAT 2021-02-05 20:20:27 0 浏览量 回答数 0

问题

backface-visibility:hidden 不支持IE么?有没有别的解决办法

.rBox{ width: 300px; height: 300px; transform: perspective(400px) rotateX(0deg); position: relative; ...
a123456678 2019-12-01 20:15:26 1025 浏览量 回答数 1

回答

chrome/safari/firefox下测试没有问题~~ <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Title</title> <style> .frontPage { height: 888px; width: 600px; left: 50%; transform: translateX(-50%); position: relative; text-align: center; top: -70px; } .block { height: 150px; box-shadow:3px 3px 8px #525252; transition: all .4s ease; margin-top:20px; border:red 1px solid; } .block:hover{ transform:scale(1.2); } </style> </head> <body> <div class="frontPage"> <div class="block" style="background-color: red"></div> <div class="block" style="background-color: #4a96d3"></div> <div class="block" style="background-color: #00a23f"></div> </div> </body> </html>
西秦说云 2019-12-02 02:39:33 0 浏览量 回答数 0

问题

LESS 参数留空时报错: .text_element(left;;;20px;); 报错

最近在学习用LESS替代CSS,发现用了之后根本停不下来,简直方便的不要不要的,科技是第一生产力。 @color1:#ccc; @color2:blue; @color3:black; .position_element(@positon:...
杨冬芳 2019-12-01 19:42:48 1100 浏览量 回答数 1

回答

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="author" content="liyanan"/> <title>测试</title> <style> #div1{ position:absolute; left:40%; top:30%; animation:rdiv 4s infinite ; } #div2{ background-color:red; width:100px; height:100px; transform:rotateZ(45deg); } @keyframes rdiv{ 0%{ transform:rotateX(0deg); } 25%{ transform:rotateX(90deg); } 50%{ transform:rotateX(180deg); } 75%{ transform:rotateX(270deg); } 100%{ transform:rotateX(360deg); } } </style> </head> <body> <div id="div1"> <div id="div2"></div> </div> </body> </html>
小旋风柴进 2019-12-02 02:38:03 0 浏览量 回答数 0

问题

统计分析(1)

统计分析 目录 百分位全表统计皮尔森系数直方图离散值特征分析T检验卡方检验数据视图协方差经验概率密度图箱线图散点图相关系数矩阵正态检验洛伦兹曲线 百分位 对一个存在的表,单列数据计算百分位 参数设置...
nicenelly 2019-12-01 20:56:27 929 浏览量 回答数 0

问题

css的3D旋转问题,不知道哪里问题,应该每45度停一下,结果每90度停一下

html: &lt;div class="details_gray" id="teacher"&gt; &lt;!--名师风采、教师队伍--&gt; &lt;div class="well_teacher_bo...
杨冬芳 2019-12-01 19:56:18 1421 浏览量 回答数 0

问题

You are forbidden to list buckets

通过SDK调用listBuckets接口出现报错 code: "AccessDenied" hostId: "oss-cn-beijing.aliyunc...
2019-12-01 18:51:07 303 浏览量 回答数 1

问题

智能对话平台API如何使用?(1)

1. 问答服务API ​ 问答服务的调用采用Restful API方式,服务内部不保存状态,所以调用和调用之间相互独立。调用API需要校验权限,详细说明见 https://help.aliyun...
nicenelly 2019-12-01 21:03:32 1994 浏览量 回答数 1

问题

什么是特征工程?(1)

目录 主成分分析特征尺度变换特征离散特征异常平滑随机森林特征重要性GBDT特征重要性线性模型特征重要性偏好计算 主成分分析 PCA 利用主成分分析方法,实现降维和降维的功能. PCA算法原理见wiki目前支持稠密数...
nicenelly 2019-12-01 22:09:08 1465 浏览量 回答数 0

问题

网络分析

目录 k-Core单源最短路径PageRank标签传播聚类标签传播分类Modularity最大联通子图点聚类系数边聚类系数计数三角形树深度 网络分析栏提供的都是基于Graph数据结构的分析算法;下图是使用平台网络分析...
nicenelly 2019-12-01 20:56:33 1207 浏览量 回答数 0

问题

svg在“container-fluid”中定位,iphone4-5-6出现莫名显示差异

在html文件开头加了这样的代码,根据屏幕宽度设置svg的缩放(svg本身定义的width=316,而container-fluid左右padding都是15,所以给屏幕宽度减去30) &lt;style id="style"&gt;&lt...
a123456678 2019-12-01 19:31:52 829 浏览量 回答数 1

回答

可以用checkbox和CSS相邻选择器的特性来做 <style> .item{ position: relative; border:1px solid #CCC; padding:5px; } .title{ height: 30px; } .item input[type=checkbox]{ opacity: 0; position: absolute; top:0; left:0; width:100%; height: 30px; z-index:2; } .item .ico{ position: absolute; right:5px; top:5px; -webkit-transform: rotate(-90deg); transform: rotate(-90deg) } .item .ico:after{ content:'>'; } .item input[type=checkbox]:checked+.ico{ -webkit-transform: rotate(90deg); transform: rotate(90deg) } input[type=checkbox]:checked~.content{ display: none; } </style> <body> <div class="item"> <div class="title">垃圾信息举报</div> <input type="checkbox"> <span class="ico"></span> <div class="content"> 感谢您的反馈 </div> </div> </body>
爵霸 2019-12-02 02:52:19 0 浏览量 回答数 0

问题

特征工程是什么?(2)

随机森林特征重要性 组件功能 使用原始数据和随机森林模型,计算特征重要性. PAI 命令 <divre style='background: rgb(246, 246, 246); fo...
nicenelly 2019-12-01 20:56:25 992 浏览量 回答数 0

问题

svg在“container-fluid”中定位,iphone4-5-6出现莫名显示差异

在html文件开头加了这样的代码,根据屏幕宽度设置svg的缩放(svg本身定义的width=316,而container-fluid左右padding都是15,所以给屏幕宽度减去30) &lt;style id="style"&gt;&lt...
杨冬芳 2019-12-01 19:39:07 947 浏览量 回答数 1

云产品推荐

上海奇点人才服务相关的云产品 小程序定制 上海微企信息技术相关的云产品 国内短信套餐包 ECS云服务器安全配置相关的云产品 开发者问答 阿里云建站 自然场景识别相关的云产品 万网 小程序开发制作 视频内容分析 视频集锦 代理记账服务 阿里云AIoT