css加x轴,css – 3D在X轴上围绕圆变换

叁歲伎倆 2022-09-03 01:28 23阅读 0赞

这是一个简单的3D过渡,看起来就像你想要实现的那样.问题是你正在使用翻译,但你的目标是在X轴上旋转.

要启动转换,请将div悬停：

div\{

position:relative;

width:300px; height:200px;

margin:10% auto;

perspective:500px;

transform-style:preserve-3d;

border:1px solid \#000;

\}

img\{width:100%;\}

p\{

position:absolute;

left:250px; top:75px;

width:80px; height:40px;

margin:0; padding:5px 10px;

background:gold;

transform: rotateX(0deg) translatez(110px);

transition:transform 2s;

\}

div:hover p\{

transform: rotateX(360deg) translatez(110px);

\}

![k8BtMvj.jpg][]

Hover the div

如果您希望旋转div始终面向用户,您可以在translatez属性之后添加另一个旋转,如下所示：

div\{

position:relative;

width:300px; height:200px;

margin:10% auto;

perspective:500px;

transform-style:preserve-3d;

border:1px solid \#000;

\}

img\{width:100%;\}

p\{

position:absolute;

left:250px; top:75px;

width:80px; height:40px;

margin:0; padding:5px 10px;

background:gold;

transform: rotateX(0deg) translatez(130px) rotateX(0deg);

transition:transform 5s;

\}

div:hover p\{

transform: rotateX(360deg) translatez(130px) rotateX(-360deg);

\}

![k8BtMvj.jpg][]

Hover the div

这些工作是因为当您在同一个声明上链接转换属性时,最后一个根据前一个声明进行.坐标系随先前的变换移动.

[k8BtMvj.jpg]: http://i.imgur.com/k8BtMvj.jpg

发表评论取消回复

表情：

评论列表（有 0 条评论，23人围观）

还没有评论，来说两句吧...

相关阅读

相关 Echarts动态加载折线图 x轴，y轴数据，阴影部分

需求 1. 制作折线图 1. x轴动态显示最近14天的日期 1. y轴根据x轴日期所对应的数据，动态显示数据所在区间。 1. 鼠标移入，显示日期对应的数据。

比眉伴天荒/ 2024年03月25日 20:04/ 0 赞/ 22 阅读

相关积分计算曲线围绕X轴旋转形成的立体体积

积分计算曲线围绕X轴旋转形成的立体体积若曲线y=x^2+1和直线y=-x+3围成的区域，再绕X坐标轴旋转一周，形成一个立体，计算该立体的体积。如图：

你的名字/ 2024年02月18日 17:30/ 0 赞/ 7 阅读

相关 echarts 隐藏y轴x轴刻度

效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmN

以你之姓@/ 2022年12月09日 01:54/ 0 赞/ 406 阅读

相关 echarts拖动X轴

dataZoom: [ { type: "slider", show: t

约定不等于承诺〃/ 2022年10月17日 04:21/ 0 赞/ 182 阅读

相关 css3旋转(绕Y轴)

1.div(id=myDiv)旋转 \myDiv:hover\{ cursor: pointer; -webkit-transform: rotate3d

男娘i/ 2022年09月26日 02:29/ 0 赞/ 244 阅读

相关 css加x轴,css – 3D在X轴上围绕圆变换

这是一个简单的3D过渡,看起来就像你想要实现的那样.问题是你正在使用翻译,但你的目标是在X轴上旋转. 要启动转换,请将div悬停： div\{ position:rela

叁歲伎倆/ 2022年09月03日 01:28/ 0 赞/ 24 阅读

相关 matlab绘制垂线（x轴或y轴）

使用line函数就可以绘制垂线 1、绘制垂直于x轴的垂线 line(\[xvalue xvalue\],\[y1 y2\])；比如绘制x=5 y取值为\[0,10\]；

骑猪看日落/ 2022年05月12日 08:42/ 0 赞/ 1554 阅读

相关 x轴或者y轴的线隐藏

原来的图表样子： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubm

客官°小女子只卖身不卖艺/ 2022年04月23日 13:56/ 0 赞/ 221 阅读

相关 css3 transform : skew(X轴角度，Y轴角度 ) 属性

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(ru

短命女/ 2021年09月10日 08:10/ 0 赞/ 534 阅读

相关 Echarts动态加载折线图 x轴，y轴数据，阴影部分

需求 1. 制作折线图 2. x轴动态显示最近14天的日期 3. y轴根据x轴日期所对应的数据，动态显示数据所在区间。 4. 鼠标移入，显示日期对应的数据。 5.

忘是亡心i/ 2021年09月01日 05:36/ 0 赞/ 1054 阅读