Jump to content
Leelala

How to set rotate an object with origin?

Recommended Posts

Hi,

 

I have an question, how to rotation object with origin?
i need my object rotate stick at the left and middle of the object.
same as the left 2 images
elA6a.png

 

Please Help~ Thanks alot.......
 

Share this post


Link to post
Share on other sites

If I'm understanding correctly, you can rotate around the left side by using transformOrigin: "left 50%". To rotate around the center, use "50% 50%". e.g.

TweenLite.to(element, 2, {rotation:90, transformOrigin:"left 50%"});

This is from the API for CSSPlugin:

  • transformOrigin - Sets the origin around which all transforms (2D and/or 3D) occur. By default, it is in the center of the element ("50% 50%"). You can define the values using the keywords "top", "left", "right", or "bottom" or you can use percentages (bottom right corner would be "100% 100%") or pixels. If, for example, you want an object to spin around its top left corner you can do this:

    //spins around the element's top left corner
    TweenLite.to(element, 2, {rotation:360, transformOrigin:"left top"});
    The first value in the quotes corresponds to the x-axis and the second corresponds to the y-axis, so to make the object transform around exactly 50px in from its left edge and 20px from its top edge, you could do:

    //spins/scales around a point offset from the top left by 50px, 20px
    TweenLite.to(element, 2, {rotation:270, scale:0.5, transformOrigin:"50px 20px"});
  • Like 3

Share this post


Link to post
Share on other sites

If I'm understanding correctly, you can rotate around the left side by using transformOrigin: "left 50%". To rotate around the center, use "50% 50%". e.g.

TweenLite.to(element, 2, {rotation:90, transformOrigin:"left 50%"});
This is from the API for CSSPlugin:
  • transformOrigin - Sets the origin around which all transforms (2D and/or 3D) occur. By default, it is in the center of the element ("50% 50%"). You can define the values using the keywords "top", "left", "right", or "bottom" or you can use percentages (bottom right corner would be "100% 100%") or pixels. If, for example, you want an object to spin around its top left corner you can do this:

    //spins around the element's top left corner
    TweenLite.to(element, 2, {rotation:360, transformOrigin:"left top"});
    The first value in the quotes corresponds to the x-axis and the second corresponds to the y-axis, so to make the object transform around exactly 50px in from its left edge and 20px from its top edge, you could do:

    //spins/scales around a point offset from the top left by 50px, 20px
    TweenLite.to(element, 2, {rotation:270, scale:0.5, transformOrigin:"50px 20px"});

 

Thank you so much jamiejefferson, this is exactly what i need! 

:-)

Share this post


Link to post
Share on other sites

how do i spin a round object forever and without interruptions? i want to animate this the wheel of this svg

<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="100px" height="100px" viewBox="0 0 175 175" enable-background="new 0 0 175 175" xml:space="preserve">
<g>
	<g>
		<g>
			<g>
				<g>
					<g>
						<path fill-rule="evenodd" clip-rule="evenodd" fill="#C97926" d="M62.897,76.102c-8.278-4.093-22.765-1.364-22.765-1.364
							c-6.208,17.736,1.379,43.659,1.379,43.659c9.658,7.503,24.145,2.729,24.145,2.729C60.828,106.8,62.897,76.102,62.897,76.102
							L62.897,76.102z M130.502,88.381c1.379-5.457-4.829-6.14-4.829-6.14c4.829,0,4.829-6.14,4.829-6.14
							c-2.069-13.643-15.177-7.503-23.454-9.55c-8.279-1.364-4.83-7.504-4.83-7.504c11.038-6.14,13.797-15.007,13.797-15.007
							c4.829-17.737-5.519-14.326-5.519-14.326c-2.069,4.775-19.315,21.83-26.904,25.923c-8.968,6.139-16.556,20.465-16.556,20.465
							c-2.76,16.372,2.759,44.341,2.759,44.341c18.625,10.915,42.08,6.822,42.08,6.822c9.658-2.047,11.038-8.868,11.038-8.868
							c1.379-5.457-2.761-6.14-2.761-6.14c6.899,0.683,7.59-7.504,7.59-7.504c2.068-6.822-2.76-8.186-2.76-8.186
							C129.812,97.249,130.502,88.381,130.502,88.381L130.502,88.381z"/>
					</g>
				</g>
			</g>
		</g>
		<g id="rota_icono1" class="rueda">
			<g>
				<path fill="#C97926" d="M150.405,34.618c-2.793,2.785-7.316,2.785-10.108,0c-2.791-2.787-2.791-7.302,0-10.088
					c2.792-2.785,7.315-2.785,10.107,0.001l-0.777,0.775l-0.777,0.775c-1.936-1.923-5.062-1.924-6.998,0
					c-1.929,1.933-1.929,5.053,0,6.984c1.937,1.925,5.063,1.925,6.998,0c1.929-1.931,1.929-5.051,0-6.984l0.777-0.775l0.777-0.775
					C153.195,27.316,153.194,31.831,150.405,34.618z"/>
			</g>
			<g>
				<path fill="#C97926" d="M11.854,62.606c-0.232-0.362-0.499-0.708-0.816-1.024c-0.217-0.216-0.458-0.392-0.698-0.569
					L60.68,10.742c0.181,0.246,0.362,0.492,0.584,0.714c0.312,0.311,0.65,0.575,1.006,0.803L11.854,62.606z"/>
			</g>
			<g>
				<path fill="#C97926" d="M165.397,103.689l-18.472-68.79c0.731-0.063,1.445-0.257,2.119-0.585l18.502,68.899
					C166.812,103.241,166.084,103.395,165.397,103.689z"/>
			</g>
			<g>
				<path fill="#C97926" d="M71.043,9.653c0.307-0.682,0.474-1.403,0.514-2.135l69.516,18.6c-0.349,0.664-0.567,1.371-0.652,2.098
					L71.043,9.653z"/>
			</g>
			<g>
				<path fill="#C97926" d="M113.978,164.474c-0.205-0.299-0.433-0.589-0.698-0.854c-0.267-0.266-0.557-0.491-0.855-0.697
					l50.387-50.276c0.205,0.296,0.43,0.584,0.694,0.848c0.269,0.268,0.561,0.496,0.862,0.702L113.978,164.474z"/>
			</g>
			<g>
				<path fill="#C97926" d="M25.892,140.926L7.336,71.83c0.731-0.069,1.443-0.27,2.114-0.604l18.509,68.92
					C27.237,140.271,26.539,140.537,25.892,140.926z"/>
			</g>
			<g>
				<path fill="#C97926" d="M34.249,149.027c0.368-0.656,0.609-1.357,0.714-2.082l68.603,18.352
					c-0.323,0.675-0.509,1.391-0.566,2.12L34.249,149.027z"/>
			</g>
			<g>
				<path fill="#C97926" d="M114.057,172.154c-2.793,2.786-7.316,2.785-10.107,0s-2.792-7.3,0-10.087
					c2.791-2.785,7.314-2.785,10.107,0l-0.777,0.777l-0.778,0.774c-1.935-1.924-5.062-1.924-6.997,0
					c-1.928,1.932-1.928,5.052,0,6.983c1.936,1.925,5.063,1.925,6.997,0c1.929-1.932,1.929-5.052,0-6.983l0.778-0.774l0.777-0.777
					C116.847,164.854,116.847,169.369,114.057,172.154z"/>
			</g>
			<g>
				<path fill="#C97926" d="M172.368,113.959c-2.791,2.785-7.315,2.785-10.107,0c-2.79-2.786-2.791-7.302,0-10.088
					c2.792-2.785,7.316-2.785,10.108,0l-0.777,0.776l-0.777,0.776c-1.937-1.926-5.063-1.926-6.998,0
					c-1.929,1.931-1.929,5.052,0,6.982c1.935,1.925,5.062,1.925,6.998,0c1.928-1.932,1.928-5.052,0-6.982l0.777-0.776l0.777-0.776
					C175.16,106.657,175.16,111.173,172.368,113.959z"/>
			</g>
			<g>
				<path fill="#C97926" d="M35.918,149.264c-2.792,2.786-7.316,2.786-10.107,0c-2.791-2.786-2.791-7.3,0-10.087
					c2.792-2.785,7.315-2.785,10.107,0.001l-0.777,0.775l-0.777,0.775c-1.936-1.925-5.063-1.925-6.998,0
					c-1.929,1.933-1.929,5.053,0,6.983c1.936,1.925,5.062,1.926,6.998,0c1.928-1.931,1.928-5.052,0-6.983l0.777-0.775l0.777-0.775
					C38.709,141.964,38.709,146.478,35.918,149.264z"/>
			</g>
			<g>
				<path fill="#C97926" d="M12.594,70.893c-2.792,2.785-7.316,2.785-10.108,0c-2.791-2.787-2.791-7.301,0-10.087
					c2.792-2.786,7.315-2.786,10.107,0l-0.778,0.776l-0.777,0.776c-1.935-1.924-5.062-1.924-6.998,0
					c-1.929,1.931-1.929,5.052,0,6.983c1.936,1.925,5.063,1.924,6.998,0c1.928-1.932,1.928-5.052,0-6.983l0.777-0.776l0.778-0.776
					C15.384,63.592,15.384,68.106,12.594,70.893z"/>
			</g>
			<g>
				<path fill="#C97926" d="M70.905,12.697c-2.792,2.785-7.315,2.785-10.107,0c-2.791-2.787-2.791-7.3,0-10.087
					c2.792-2.786,7.316-2.786,10.107,0l-0.777,0.775L69.35,4.162c-1.935-1.925-5.062-1.925-6.997,0
					c-1.928,1.932-1.928,5.052,0,6.983c1.935,1.925,5.062,1.925,6.997,0c1.929-1.932,1.929-5.052,0-6.983l0.778-0.777l0.777-0.775
					C73.697,5.396,73.696,9.91,70.905,12.697z"/>
			</g>
		</g>
	</g>
</g>
</svg>

If i use timelinemax and the property rotation, it first changes the position of the element, then rotates, stop por a sec and rotates again, i want it to rotate forever withouy pause, hpw can i do that? Thanks

Share this post


Link to post
Share on other sites

Hi celopez16 :)

 

You can spin an element forever like this:

TweenMax.to(yourElement, 1, {rotation:360, ease:Linear.easeNone, repeat:-1})

Just an FYI - it's always best to start a new topic for your questions and provide a CodePen for us. Thanks.

  • Like 3

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.