- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to apply a 2D or 3D transformation to an element with JavaScript?
Use the transform property in JavaScript to set 2D or 3D transformation to an element. Set the value to rotate (60deg), if you want to rotate it to 60 degrees, etc.
Example
You can try to run the following code to implement a 2D or 3D transformation to an element with JavaScript −
<!DOCTYPE html>
<html>
<head>
<style>
#box {
margin-left: 20px;
border: 2px solid black;
width: 300px;
height: 250px;
background-color: gray;
color: white;
}
</style>
</head>
<body>
<button onclick = "display()">Apply</button>
<div id = "box"><p>Demo Text</p></div>
<script>
function display() {
document.getElementById("box").style.transform = "rotate(60deg)";
}
</script>
</body>
</html>
Updated on 23-Jun-2020 11:33:53
- Related Questions & Answers
- How to apply a 2D or 3D transformation to an element with CSS
- How to apply XSL transformation on an XML document?
- Apply an IF condition to every element in an HTML table with JavaScript?
- How to apply a 2D convolution operation in PyTorch?
- How to apply a 2D Max Pooling in PyTorch?
- How to apply a 2D Average Pooling in PyTorch?
- How to apply linear transformation to the input data in PyTorch?
- How to apply a 2D transposed convolution operation in PyTorch?
- 2D Transformation of Elements using CSS3
- How to add a class name to an element with JavaScript?
- How to create a transformation matrix with HTML5?
- How to remove a class name from an element with JavaScript?
- Difference Between 2D and 3D Shapes
- How to add an element to a javascript object?
- How to set whether or not an element is resizable by the user with JavaScript?
Advertisements