Svg transform-origin - firefox working

Developer
Jonathan Marzullo
Size
2,284 Kb
Views
101,200
  1. Svg transform-origin - firefox working Previews
  2. Svg transform-origin - firefox working HTML Codes
  3. Svg transform-origin - firefox working CSS Codes
  4. Svg transform-origin - firefox working JS Codes

How do I make an svg transform-origin - firefox working?

What is a svg transform-origin - firefox working? How do you make a svg transform-origin - firefox working? This script and codes were developed by Jonathan Marzullo on 11 August 2022, Thursday.

Svg transform-origin - firefox working Previews
IQ Test

Svg transform-origin - firefox working - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>svg transform-origin - firefox working</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg version="1.1" id="container" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve"> <circle cx="100" cy="100" r="50" fill="lightgrey"/> <g class="fix"> <g class="animate-clockwise"> <rect id="rectangle" x="50" y="90" width="100" height="20" fill="red" /> <rect id="outline" x="50" y="90" width="100" height="20" fill="none" stroke-weight="2" stroke="black"/> </g> </g>
</svg> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.1/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Svg transform-origin - firefox working - Script Codes CSS Codes

body{ margin:0; padding:0;
}
svg { position: fixed; top: -160px; left: 0px;
}
svg .fix { -webkit-transform: translate(100px,100px); -moz-transform: translate(100px,100px); transform: translate(100px,100px);
}
svg rect { -webkit-transform: rotate(0) translate(-100px,-100px); -moz-transform: rotate(0) translate(-100px,-100px); transform: rotate(0) translate(-100px,-100px); -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; transform-origin: 50% 50%;
}
.animate-clockwise { -webkit-animation: clockwise 900ms infinite ease-out alternate; -moz-animation: clockwise 900ms infinite ease-out alternate; animation: clockwise 900ms infinite ease-out alternate;
}
@-webkit-keyframes clockwise { 0% { -webkit-transform: scale(0) rotate(0deg); } 100% { -webkit-transform: scale(1) rotate(360deg); }
}
@-moz-keyframes clockwise { 0% { -moz-transform: scale(0) rotate(0deg); } 100% { -moz-transform: scale(1) rotate(360deg); }
}
@keyframes clockwise { 0% { transform: scale(0) rotate(0deg); } 100% { transform: scale(1) rotate(360deg); }
}

Svg transform-origin - firefox working - Script Codes JS Codes

//var divRect,rectangle,inanimateRect;
//TweenMax.set("#outline",{transformOrigin:"50% 50% 0"});
//window.onload = function () { //TweenMax.to("#rectangle",.9,{startAt:{scale:.5, rotation:180,transformOrigin:"50% 50%"},rotation:0,scale:1, ease:Back.easeOut,yoyo:true,repeat:-1}); // TweenMax.to("#outline",.9,{startAt:{scale:.5, rotation:180,transformOrigin:"100px 100px"},rotation:0,scale:1,ease:Back.easeOut,yoyo:true,repeat:-1});
//};
Svg transform-origin - firefox working - Script Codes
Svg transform-origin - firefox working - Script Codes
Home Page Home
Developer Jonathan Marzullo
Username jonathan
Uploaded August 11, 2022
Rating 3
Size 2,284 Kb
Views 101,200
Do you need developer help for Svg transform-origin - firefox working?

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!

Jonathan Marzullo (jonathan) Script Codes
Name
CSS Filter Test - Grayscale
GSAP Animate CSS background-position
CSS Opacity - GSAP
CSS Opacity using autoAlpha - GSAP
Zoom in an image and show a div on hover
Lava Lamp Style Menu using GSAP - Hover Events
GSAP Carousel
IE10 and above preserve-3d workaround
Typing Effect using CSS3 Animation
GSAP test 2 - IE10 preserve-3d workaround
Create amazing blog posts with AI!

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!