旋转的div3之div旋转

最新推荐文章于 2024-04-09 17:59:31 发布
最新推荐文章于 2024-04-09 17:59:31 发布
阅读量794 收藏
点赞数
分类专栏： # html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/milijiangjun/article/details/77232862
版权
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.c{
width: 200px;   
    height: 200px;   
    text-align: center;
    
}
.wrap {   
    perspective: 800px;   
    perspective-origin: 50% 100px;   
} 
.cube {   
    position: relative;   
    width: 200px;   
    transform-style: preserve-3d;   
}   
  
.cube div {   
    position: absolute;   
    width: 200px;   
    height: 200px;   
}  
.back {   
    transform: translateZ(-100px) rotateY(180deg);   
}   
.right {   
    transform: rotateY(-270deg) translateX(100px);   
    transform-origin: center right;   
}   
.left {   
    transform: rotateY(270deg) translateX(-100px);   
    transform-origin: center left;   
}   
.top {   
    transform: rotateX(-90deg) translateY(-100px);   
    transform-origin: top center;   
}   
.bottom {   
    transform: rotateX(90deg) translateY(100px);   
    transform-origin: bottom center;   
}   
.front {   
    transform: translateZ(100px);   
}  
@keyframes spin {   
    from { transform: rotateY(0); }   
    to { transform: rotateY(360deg); }   
}   
  
.cube {   
    animation: spin 5s infinite linear;   
}  
.top,.left,.back,.right,.front{border:1px solid red;}
</style>


</head>
<body>
<div class="c">
<div class="wrap">  
    <div class="cube">  
        <div class="front">front</div>  
        <div class="back">back</div>  
        <div class="top">top</div>  
        <div class="bottom">bottom</div>  
        <div class="left">left</div>  
        <div class="right">right</div>  
    </div>  
</div> 
</div>
</body>
</html>
milijiangjun
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
div实现旋转效果【CSS3】
December_shi的博客
11-18 1095
CSS旋转效果： CSS代码： <style> div { position: absolute; left: 300px; top: 200px; width: 100px; height: 100px; background-color: #000; /* transform-origin: 0 0; transform: rotate(0deg); */
div旋转
sinat_25606843的博客
02-27 635
&lt;!doctype html&gt;&lt;html lang="en"&gt;&lt;head&gt;    &lt;meta charset="UTF-8"&gt;    &lt;title&gt;Document&lt;/title&gt;    &lt;style&gt;        #div{width: 100px;height: 100
旋转div
黎小小的博客
08-15 3005
需求：一个div围绕另一个div旋转 首先让要旋转的div本身先位移，再进行旋转；元素 translate 移动之后，并不修改元素本身的变换源点； <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" co...
实现div旋转效果
leiax00
07-15 703
<template> <el-dialog custom-class="loading-dlg" :show-close="false" :visible="selfLoading.show" > <div class="loading-main"> <div class="icon"> <svg-icon icon-class="iconLoadingStep-1" class-nam
旋转 div 元素
LUOCHENLONG的专栏
12-20 636
div { margin:30px; width:200px; height:100px; background-color:yellow; /* Rotate div */ transform:rotate(9deg); -ms-transform:rotate(9deg); /* Internet Explorer */ -moz-transform:rotate(9deg)
DIV旋转.rar
09-03
本示例“DIV旋转.rar”着重介绍了如何使用CSS3来实现网页中div元素的3D旋转效果，这对于创建动态、交互式的网页界面至关重要。 3D旋转是CSS3 Transform模块的一部分，它允许我们对元素进行平移、缩放、旋转等空间...
div 旋转 html
01-03
div 旋转显示
旋转任意角度 如何让div旋转一定的角度
12-13
DIV旋转属性的演示</title> <meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE8″ /> <style type=”text/css”> body { font-family: “Arial”, sans-serif; } #example { position...
仅用CSS让你的div模块旋转
09-25
具体到实现div旋转的代码示例，如文件内容所示，可以通过以下方式实现： ```css .rotate { width: 300px; height: 300px; background-color: red; -webkit-transition: -webkit-transform 1s; /*兼容旧版浏览器...
div 自动旋转 手机旋转效果 google出
11-20
首先，要创建一个 `div` 自动旋转的效果，我们需要借助 CSS3 的 `transform` 属性。`transform` 可以对元素进行多种变换，如旋转、缩放、平移等。对于旋转效果，我们使用 `rotate()` 函数，语法如下： ```css div {...
关于div三维旋转
weixin_42546367的博客
10-09 187
下面是源代码 <!DOCTYPE html> <html> <head> <style> #div1 { position: relative; height: 150px; width: 150px; margin: 50px; padding:10px; border: 1px solid black; perspective:10000; -webkit-perspective:15000; /* Safari and Chrome */ ...
Div元素中心拖拽旋转（两种方式）
最新发布
记录美好生活
04-09 375
旋转 atan2
怎么写一个可以鼠标控制旋转的div？
Twinkle_sone的博客
10-22 746
鼠标控制元素旋转在现在也是一个很常见的功能，让我们从实现div元素的旋转控制开始来了解元素旋转的具体原理和实现方法吧。
html如何让div旋转,3种方法（div法、css法、js法）制作html的旋转太极图
weixin_34157892的博客
06-10 4339
1.说明：推荐指数：★★★★通过动画太极的方法，增加学习兴趣，对html的结构和css、JavaScript、div的认识和了解会逐步深入。2.复习html的结构框架 html结构基本框架代码 3 div法3.1 代码：复制下面的代码，命名为：div法.html，用浏览器打开即可。 div法的旋转的太极图div{ width: 0; /*这个高就是黑色圆形和白色圆形的...
html 怎么旋转一个div,css如何实现div一直旋转
weixin_39614750的博客
06-16 1396
css如何实现div一直旋转发布时间：2021-01-07 10:07:12来源：亿速云阅读：156作者：小新这篇文章给大家分享的是有关css如何实现div一直旋转的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。css实现div一直旋转的方法：首先创建一个div元素，并给它一个id值；然后使用内联样式给div添加一些样式；接着使用“@keyframes”规则创建一个动画r...
css让div旋转,CSS3 transform 属性 旋转 div 元素
weixin_28900463的博客
08-04 2510
div{transform:rotate(7deg);-ms-transform:rotate(7deg); /* IE 9 */-moz-transform:rotate(7deg); /* Firefox */-webkit-transform:rotate(7deg); /* Safari 和 Chrome */-o-transform:rotate(7deg); /...
div动画旋转效果
weixin_30764137的博客
05-05 715
animation:spin 10slinearinfinite; 转载于:https://www.cnblogs.com/shark1100913/p/10811191.html
vue3 动态div旋转
07-28
要实现在Vue 3中动态旋转一个div，你可以使用CSS的transform属性结合Vue的动态绑定来实现。下面是一个简单的示例： 首先，在Vue组件的模板中添加一个div，并使用动态绑定将旋转角度绑定到一个数据属性上： ```html <template> <div :style="{ transform: `rotate(${rotation}deg)` }">Hello Vue!</div> </template> ``` 然后，在Vue组件的data选项中定义rotation属性，并在需要的时候更新它： ```javascript <script> export default { data() { return { rotation: 0 } }, methods: { rotateDiv() { this.rotation += 45; // 每次增加45度 } } } </script> ``` 最后，你可以在需要的时候调用`rotateDiv`方法来旋转div，例如在点击事件中： ```html <template> <div :style="{ transform: `rotate(${rotation}deg)` }" @click="rotateDiv">Hello Vue!</div> </template> ``` 这样，当你点击div时，它将以每次增加45度的角度进行旋转。你可以根据自己的需求调整旋转角度和触发旋转的事件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值