I am new to coding and trying to learn on my own. I want my code to work smoothly across all popular browsers, starting with Safari. Currently, the -webkit-transition: transform 1.0s; property in my CSS code works instantly in Chrome but not in Safari. Not sure if I need an additional meta tag or something. Here is a snippet of my code:
HTML
<section id="prismSection">
<h1 class="text-center">Now a Rectangular Prism</h1>
<div class="prismWrapper">
<div id="prism">
<figure class="front"><p>Front</p></figure>
<figure class="back"><p>Back</p></figure>
<figure class="right"><p class="vertical-text">Right</p></figure>
<figure class="left"><p class="vertical-text2">Left</p></figure>
<figure class="top"><p>Top</p></figure>
<figure class="bottom"><p>Bottom</p></figure>
</div>
</div;
<button class="btn btn-lg btn-primary" onclick="prismFront();">Front</button>
<button class="btn btn-lg btn-primary" onclick="prismBack();">Back</button>
<button class="btn btn-lg btn-primary" onclick="prismRight();">Right</button>
<button class="btn btn-lg btn-primary" onclick="prismLeft();">Left</button>
<button class="btn btn-lg btn-primary" onclick="prismTop();">Top</button>
<button class="btn btn-lg btn-primary" onclick="prismBottom();">Bottom</button>
</section>
CSS
#prismSection {
text-align: center;
padding-bottom: 40px;
}
#prismSection > button {
border: 2px solid black;
}
#prismSection > h1 {
color: white;
font-family: Paytone One, arial;
font-size: 2.5em;
}
/* The rest of the CSS styles remain unchanged */
Javascript
// Javascript functions to handle prism transformations
// jQuery shorthand for document ready function
$(function() {
// Button click events for prism rotations
$('#btnFront').on('click', function() {
$('#prism').css('transform', 'translateZ( -50px ) rotateY( 0deg )');
});
// Repeat similar event listeners for other buttons
});
I will attempt to create a JSFiddle demo soon. Thank you!
Edit:
I have updated the button functions using jQuery syntax and individual IDs for each button:
<script type="text/javascript">
$(function() {
$('#btnFront').on('click', function() {
$('#prism').css('transform', 'translateZ( -50px ) rotateY( 0deg )');
});
// Implement the same logic for other button clicks
});
</script>
No changes observed in the behavior.