Css3-rotate demo
How do I make an css3-rotate demo?
What is a css3-rotate demo? How do you make a css3-rotate demo? This script and codes were developed by IEkiller on 18 January 2023, Wednesday.
Css3-rotate demo - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>css3-rotate demo</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="choose"> <a href="javascript:window._test_.init1();" class="btn">demo1</a> <a href="javascript:window._test_.init2();" class="btn">demo2</a> <a href="javascript:window._test_.init3();" class="btn">demo3</a> <a href="javascript:window._test_.init4();" class="btn">demo4</a> <a href="javascript:window._test_.init5();" class="btn">demo5</a> </div> <div id="warp"> <div class="box"> <div class="rot"> <a class="hover_btn" href="javascript:;">hover <div class="inhover"> show me </div> </a> </div> <div class="rot"></div> <div class="rot"></div> <div class="rot"></div> <div class="rot"></div> <div class="rot"></div> <div class="rot"></div> <div class="rot"></div> <div class="rot"></div> <div class="rotate3 rot">click me</div> <div class="point"></div> </div> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://libs.baidu.com/jquery/1.8.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Css3-rotate demo - Script Codes CSS Codes
body{background: #FFFBE8;}
#warp{width: 960px; height: 600px; background: #eee; position: relative; margin: 50px auto;}
.box{width: 100px; height: 300px; position: absolute; left:450px; top:50px;}
.point{width:10px; height: 10px; border-radius: 50%; background: #eee; position: absolute; left: 15px; top:275px;}
.rot{width: 100px; height: 300px; position: absolute; left: 0; top:0; border: 1px solid #333; background: #f60; border-radius: 4px; -webkit-transform-origin: 20px 280px; -moz-transform-origin: 20px 280px; -ms-transform-origin: 20px 280px; -o-transform-origin: 20px 280px; transform-origin: 20px 280px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); transition:all linear 0.3s;
}
.hover_btn{ color: #333; display: block; height: 20px;
}
.inhover{ display: none; position: absolute; top: 20px; left: 20px; width: 50px; height: 50px; background:#09f;
}
.hover_btn:hover .inhover{ display: block;
}
.rotate3{background: #222; color:#eee; text-align:center; font-size:16px; line-height:30px;}
.choose{height: 50px; line-height: 50px; text-align: center;}
.choose .btn{ color:#666; text-decoration: none; width: 50px; height:50px; display: inline-block; }
Css3-rotate demo - Script Codes JS Codes
(function(){ var TEST = { /*init:function(){ var _obj = this, iNum = $('.box .rot').length, iAdddeg = 30; var iDeg = 240/iNum; $('.box .rot').live('click',function(){ var $this=$(this); if($(this).index()+1 === iNum){//最后一个.rot if(!this.btn){ $('.box .rot').each(function(){ var tempDeg =($(this).index() - iNum/2 )*iDeg; $(this).css({ '-webkit-transform': 'rotate('+tempDeg+'deg)', '-moz-transform': 'rotate('+tempDeg+'deg)', '-ms-transform': 'rotate('+tempDeg+'deg)', '-o-transform': 'rotate('+tempDeg+'deg)', 'transform': 'rotate('+tempDeg+'deg)', }); }); this.btn =true; }else{ $('.box .rot').each(function(){ var tempDeg =0; $(this).css({ '-webkit-transform': 'rotate('+tempDeg+'deg)', '-moz-transform': 'rotate('+tempDeg+'deg)', '-ms-transform': 'rotate('+tempDeg+'deg)', '-o-transform': 'rotate('+tempDeg+'deg)', 'transform': 'rotate('+tempDeg+'deg)', }); }); this.btn =false; } }else{ $('.box .rot').each(function(){ var tempDeg; if( $(this).index() > $this.index() ){ tempDeg = ($(this).index() - $this.index() )*iDeg+iAdddeg; }else{ tempDeg = ($(this).index() - $this.index() )*iDeg; } $(this).css({ '-webkit-transform': 'rotate('+tempDeg+'deg)', '-moz-transform': 'rotate('+tempDeg+'deg)', '-ms-transform': 'rotate('+tempDeg+'deg)', '-o-transform': 'rotate('+tempDeg+'deg)', 'transform': 'rotate('+tempDeg+'deg)', }); }); } }); }*/ init1:function(){ var _obj = this, iNum = $('.box .rot').length, iAdddeg = 30, tempDeg, onOff = false; var iDeg = 120/iNum; $('.rot').each(function(){ tempDeg =($(this).index() - iNum/2 )*iDeg; _obj.fnRotate(this ,tempDeg); }); $('.box .rot').live('click',function(){ var $this=$(this); delDeg(0); function delDeg(val){ $('.rot').each(function(){ if(val === 0){ if( $(this).index() > $this.index() ){ tempDeg = ($(this).index() - $this.index() )*(iDeg-3)+iAdddeg; }else{ tempDeg = ($(this).index() - $this.index() )*iDeg; } } _obj.fnRotate(this ,tempDeg); }); } }); }, init2:function(){ var _obj = this, iNum = $('.box .rot').length, iAdddeg = 30, tempDeg, onOff = false; var iDeg = 120/iNum; $('.box .rot').live('click',function(){ var $this=$(this); if($this.index()+1 === iNum){//最后一个.rot if(!onOff){ delDeg(1); }else{ delDeg(-1); } onOff =!onOff; }else{ delDeg(0); } function delDeg(val){ $('.rot').each(function(){ if(val ===1){ tempDeg =($(this).index() - iNum/2 )*iDeg; }else if(val === -1){ tempDeg = 0; }else if(val === 0){ if( $(this).index() > $this.index() ){ tempDeg = ($(this).index() - $this.index() )*(iDeg-5)+iAdddeg; }else{ tempDeg = ($(this).index() - $this.index() )*iDeg; } } tempDeg = -tempDeg; _obj.fnRotate(this ,tempDeg); }); } }); $('.rotate3').click(); }, init3:function(){ var _obj = this, iNum = $('.box .rot').length, iAdddeg = 30, tempDeg, onOff = false; var iDeg = 240/iNum; $('.rot').each(function(){ _obj.fnRotate(this ,0); }); $('.box .rot').live('click',function(){ var $this=$(this); if($this.index()+1 === iNum){//最后一个.rot if(!onOff){ delDeg(1); }else{ delDeg(-1); } onOff =!onOff; }else{ delDeg(0); } function delDeg(val){ $('.rot').each(function(){ $(this).removeClass('cur'); if(val ===1){ tempDeg =($(this).index() - iNum/2 )*iDeg; }else if(val === -1){ tempDeg = 0; $(this).addClass('cur'); }else if(val === 0){ if( $(this).index() > $this.index() ){ tempDeg = ($(this).index() - $this.index() )*iDeg+iAdddeg; }else{ tempDeg = ($(this).index() - $this.index() )*iDeg; } } _obj.fnRotate(this ,tempDeg); }); } }); }, init4:function(){ var _obj = this, iNum = $('.box .rot').length, iAdddeg = 30, tempDeg, onOff = false; var iDeg = 150/iNum; $('.rot').each(function(){ tempDeg =($(this).index() - iNum/2 )*iDeg; _obj.fnRotate(this ,tempDeg); }); $('.box .rot').live('click',function(){ var $this=$(this); delDeg(0); function delDeg(val){ $('.rot').each(function(){ if(val === 0){ if( $(this).index() > $this.index() ){ tempDeg = ($(this).index() - $this.index() )*(iDeg-12)+iAdddeg; }else{ tempDeg = ($(this).index() - $this.index() )*iDeg; } } _obj.fnRotate(this ,tempDeg); }); } }); }, init5:function(){ var _obj = this, iNum = $('.box .rot').length, iAdddeg = 30, tempDeg, onOff = false; var iDeg = 120/iNum; $('.box .rot').live('click',function(){ var $this=$(this); delDeg(0); function delDeg(val){ $('.rot').each(function(){ if(val === 0){ if( $(this).index() > $this.index() ){ tempDeg = ($(this).index() - $this.index() )*(iDeg-8)+iAdddeg; }else{ tempDeg = ($(this).index() - $this.index() )*(iDeg-3); } } _obj.fnRotate(this ,tempDeg); }); } }); $('.box .rot:eq(0)').click(); }, fnRotate:function(obj,tempDeg){ $(obj).css({ '-webkit-transform': 'rotate('+tempDeg+'deg)', '-moz-transform': 'rotate('+tempDeg+'deg)', '-ms-transform': 'rotate('+tempDeg+'deg)', '-o-transform': 'rotate('+tempDeg+'deg)', 'transform': 'rotate('+tempDeg+'deg)', }); } }; return window._test_ = TEST; })();
window._test_.init1();
Developer | IEkiller |
Username | win7killer |
Uploaded | January 18, 2023 |
Rating | 3 |
Size | 2,994 Kb |
Views | 6,072 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Canvas snow | 2,572 Kb |
Timer | 2,291 Kb |
Css border amazing-3 | 2,287 Kb |
Dir tree | 3,169 Kb |
Rain Of Text | 2,463 Kb |
Css border amazing-1 | 1,841 Kb |
A Pen by IEkiller | 6,561 Kb |
Canvas ball | 2,836 Kb |
Color selecter | 3,973 Kb |
Rote 4 | 2,986 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Swiftype Lower Third | Zumwalt | 4,796 Kb |
We Simplify animation | Meodai | 48,169 Kb |
Simple star rating using js and data-uri | TheEnd | 5,795 Kb |
JQuery exercise | Brian-baum | 3,780 Kb |
Chuck Norris Background | Manz | 1,967 Kb |
Funny menu | AxeLVaisper | 4,671 Kb |
Drifting Clouds | Benedikte | 2,247 Kb |
Count up | Alanshortis | 2,391 Kb |
CSS Google Now | Jackmoran | 3,196 Kb |
Break Out | AzazelN28 | 12,431 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!