safari translate css

Safari User Guide

• Change your homepage
• Import bookmarks, history, and passwords
• Make Safari your default web browser
• Go to websites
• Find what you’re looking for
• Bookmark webpages that you want to revisit
• See your favorite websites
• Use tabs for webpages
• Pin frequently visited websites
• Play web videos
• Mute audio in tabs
• Pay with Apple Pay
• Autofill credit card info
• Autofill contact info
• Keep a Reading List
• Hide ads when reading articles

Translate a webpage

• Download items from the web
• Share or post webpages
• Add passes to Wallet
• Save part or all of a webpage
• Print or create a PDF of a webpage
• Customize a start page
• Customize the Safari window
• Customize settings per website
• Zoom in on webpages
• Get extensions
• Manage cookies and website data
• Block pop-ups
• Clear your browsing history
• Browse privately
• Autofill user name and password info
• Prevent cross-site tracking
• View a Privacy Report
• Change Safari preferences
• Keyboard and other shortcuts
• Troubleshooting

Translate a webpage in Safari on Mac

If a webpage can be translated into one of your preferred languages, you can have Safari translate it.

Open Safari for me

If a language isn’t available

You may be able to make more languages available in the Translate menu by adding the languages in Language & Region preferences. Once you add a language to your list of preferred languages, if a translation is available to that language, it will appear in the Translate menu in Safari.

To add a language, see Change Language & Region General preferences .

Note: The availability of translations and the number of languages that can be translated may vary by country or region.

New WebKit Features in Safari 14.1

Apr 29, 2021

by Jon Davis

Safari 14.1 for macOS Big Sur, iPadOS 14.5, and iOS 14.5 brings new WebKit features, APIs, performance improvements, and improved compatibility for web developers. Take a look.

Flexbox Gap Support

Safari 14.1 now supports the gap property inside Flexbox containers, along with row-gap and column-gap . Gaps in Flexbox make it possible for web developers to create space between Flex items without resorting to annoying margin hacks.

The gap property, of course, has worked inside Grid containers since Safari 12. Because gap is supported for Grid, testing support for the property in a Flexbox formatting context wasn’t possible by using feature queries ( @supports ). By adding support for gap in Flexbox, Safari brings the web closer to widespread compatibility.

For more information, see the “flex containers” definition in the “Row and Column Gutters” section of the CSS Box Alignment specification .

Date & Time Inputs on macOS

In HTML, the date , time , datetime-local attributes for the input element prompt the browser to create date and/or time controls — an interface that’s designed to let the user easily enter a time or a date, usually with a calendar. Safari has supported these input fields on iOS since 2012. Now with Safari 14.1, these fields are supported on macOS as well.

CSS Individual Transform Properties

With WebKit support of Individual Transform Properties, web developers can write CSS rules and keyframe animations in a more straightforward way.

For years , the transform property has provided the ability to scale, rotate, and translate. You could access this power through code like this:

Now, if you wish, you can instead write:

This is a syntactical and conceptual difference — the result is the same. You might find it easier to understand and remember.

This syntax also avoids unintentional overrides of other transform-related properties and eliminates pre-computing intermediate values when using keyframe animations.

You can learn more by reading “ CSS Individual Transform Properties ” on the WebKit blog.

Paint Timing API

A valuable metric to improving the performance of web content is the time it takes for the user-agent to show something to the user. WebKit added the Paint Timing API to its suite of performance APIs to provide this measurement. Developers can measure:

• first-paint for the time it takes to show pixels of anything that is not the user-agent’s default background
• first-contentful-paint to get the time for the user to see content such as text or an image

To learn more about the API, see the Paint Timing specification .

Web Speech API

The Web Speech API in WebKit has supported speech synthesis for some time. Now, Safari supports speech recognition powered by the same speech engine as Siri. That means web developers can enjoy the benefits of high-quality transcription for over 50 languages and dialects. Note that users will need Siri enabled in System Preferences on macOS or Settings in iOS or iPadOS for the API to be available to be used.

For more information on speech recognition and speech synthesis on the web, see the Web Speech API specification .

Web Audio API

As a continuing area of focus, Safari compatibility improvements are ongoing. Updates to the Web Audio API bring it to standards compliance. It is now available unprefixed with support for advanced audio processing via Audio Worklets.

You can learn more about web audio from the Web Audio API specification .

Interoperability Improvements

There are several new interoperability improvements in WebKit:

• Web Animations now work on 122 more properties
• Animation of pseudo-elements beyond ::before and ::after .
• Improved mouse support on iPadOS and in Catalyst apps, including wheel events and hover/pointer media queries

Updated wheel Event handling improves performance and interoperability with other browsers. Wheel handlers registered on root objects (window/document/body) with default arguments will be treated as passive. Pages that want to prevent the default handling of Wheel Events which result from gestures like trackpad swipes on macOS, must now call preventDefault() on the first Wheel Event in the sequence.

MediaRecorder API

WebKit added support for MediaStream Recording, also known as the MediaRecorder API. It allows websites to record audio and video, then encode them using the platform’s available set of default encodings.

Learn more in the MediaStream Recording specification .

WebM Support

WebKit added improved support for WebM media. With Safari 14, WebKit added support for WebM via MSE on iPadOS and macOS. Now, WebKit on macOS supports WebM files containing VP8 or VP9 video tracks and Vorbis audio tracks. Developers can now offer WebM content to users, though users will enjoy the best quality and power efficiency with h.264 or HEVC.

See the WebM Project for details.

JavaScript Improvements

Class fields.

Updates to the JavaScript engine in WebKit adds new support for private class fields to enforce restrictions for static and instance fields in ES6 classes. Developers that used conventions before can switch to built-in support to manage access to properties. Public static class fields are also available, adding to the previously supported public instance class fields.

To learn more, see the public and private instance field proposal .

Internationalization API

New Internationalization API features include Intl.DisplayNames , Intl.ListFormat , and Intl.Segmenter . Intl.DateTimeFormat was updated to support dateStyle and timeStyle options. The Intl.NumberFormat method was updated with support to display measurement units, notation formats, sign display, and narrow symbol currency formatting.

For more information on these formatting methods, see the proposals for Intl.DisplayNames , Intl.ListFormat , Intl.Segmenter , Intl.DateTimeFormat , and Intl.NumberFormat .

WeakRef and FinalizationRegistry

WeakRef supports holding an object that can be garbage collected when there are no strong references to it. The FinalizationRegistry object compliments WeakRef to manage cleanup tasks when a target object is garbage collected.

Read more details in the WeakRefs proposal .

WebAssembly

WebAssembly support, introduced with Safari 11 , is a low-level binary format used as a compilation target for existing languages.

WebAssembly support for the atomic instructions in the Threading specification, are enabled in Safari 14.1. Note, that until Safari supports the COEP/COOP headers, shared memory is not enabled as it could expose users to cross-origin Specter data leaks.

For more information, see the WebAssembly Specification for WASM Threads .

WebAssembly Sign Extension Operator

New sign-extension operator support preserves the number’s sign while extending the number of bits of an integer.

Learn more in the Sign-extension Ops proposal.

JavaScript BigInt Integration

Support for a new JavaScript API allows bidirectional conversion of a JavaScript BigInt value to a WASM 64-bit integer.

See the WebAssembly Specification for toJSValue .

Private Click Measurement

This release features Private Click Measurement – a proposed web standard that enables advertisers to measure the effectiveness of click-through ad campaigns in a privacy-preserving way. This new technology is part of a larger effort to remove cross-site tracking from the web and provide privacy-preserving alternatives where needed.

See “ Introducing Private Click Measurement, PCM ” on the WebKit blog.

Storage Access API Updates

WebKit has improved the Storage Access API to allow per-page storage access and allow nested iframes to request storage access. These interoperability changes are from the ongoing standardization of the Storage Access API together with Mozilla, Microsoft, and the web community. This API has shipped in Safari since 2018 and is part of a larger effort to remove cross-site tracking from the web and provide privacy-preserving alternatives where needed.

For details, see “ Updates to the Storage Access API ” on the WebKit blog.

Web Inspector Updates

The updates to Web Inspector available in these releases include:

• A new three-panel layout in the Elements Tab brings the Styles sidebar into an independent panel alongside the existing details sidebar.
• The new Font panel gives content authors visibility into details of the fonts used on the page.
• Breakpoints in the Sources Tab can now be configured with conditions or actions, reducing the need for stray console.log statements left in production code.

To learn more about Web Inspector features, see the Web Inspector Reference documentation.

Availability

These improvements are available to users running Safari on iPadOS 14.5, iOS 14.5, or Safari 14.1 on macOS Big Sur (11.3), macOS Catalina, or macOS Mojave. These features were also available to web developers in Safari Technology Preview releases. Changes in this release of Safari were included in the following Safari Technology Preview releases: 110 , 111 , 112 , 113 , 114 , 115 , 116 , 117 , 118 , 119 , 120 , 121 , 122 .

Download the latest Safari Technology Preview release to stay at the forefront of future web platform and Web Inspector features. You can also use the WebKit Feature Status page to watch for changes to web platform features you’re interested in.

If you run into any issues, we welcome your bug reports for Safari or WebKit bugs for web content issues. Send us a tweet @webkit to share your thoughts on this release.

How-To Geek

How to translate web pages in safari on mac.

Have you landed on a French or Spanish website? Translate it to English with the press of a button!

Often find yourself on websites with text in a foreign language? If you use Safari, there's no need to go to Google Translate. You can translate web pages between seven languages right in Safari on a Mac.

Starting with Safari 14.0, Apple included a translation feature directly in the browser. As of this writing, the feature is in beta, but fully functional. If your Mac is running the latest version of macOS Mojave, Catalina,  Big Sur , or newer, you can access the translation feature.

The translation functionality works between the following languages: English, Spanish, Italian, Chinese, French, German, Russian, and Brazilian Portuguese.

By default, you can translate any of the above languages to English. You can also add more languages to the mix (we'll talk more about that below).

To get started, open a web page in one of the supported languages. Safari will automatically recognize that language, and you'll see "Translation Available" in the URL bar, along with a Translation button; click it.

If this is the first time you've used the feature, a pop-up will appear. Click "Enable Translation" to turn on the feature.

In the translation menu, select "Translate to English."

The text on the page will instantly convert to English, as shown in the image below. The Translation button will also turn blue.

To disable the Translation feature and return to the original language, click the Translation button again, and then select "View Original."

As we mentioned above, you can also translate to languages other than English. To do so, click the Translation button, and then select "Preferred Languages."

This opens the "Language & Region" menu in System Preferences. Here, click the plus sign (+) to add a new preferred language. You can add multiple languages here while continuing to use English as the default language across your Mac.

In the pop-up, select the languages you want to add, and then click "Add."

System Preferences will ask if you want to make this your default language. Choose the previous default language if you want it to remain the status quo.

Now that you've added a new preferred language, you'll see the translation button even when you visit web pages that are in English.

The translation process for a preferred language is the same: click the Translation button in the URL bar, and then select "Translate to [the language you selected]."

Again, you can view the original at any time by simply clicking "View Original" in the Translation menu.

If you're traveling to a new country, you can also use the built-in Translate app on your iPhone or iPad to quickly translate speech between multiple languages.

Related: How to Use the Apple Translate App on iPhone

Safari CSS Reference

• Table of Contents
• Jump To…
• Download Sample Code

Introduction to Safari CSS Reference

You can use Cascading Style Sheets (CSS) in conjunction with HTML-based web content to fine-tune the style of the content. The goal of CSS is to separate the structure provided by HTML from the style provided by CSS. Taking style information out of the structure allows designers to independently tune a page’s style for a variety of audiences and readers (such as desktops, hand-held devices like iPhone, and text-based browsers).

All Safari web browsers use the WebKit engine to display webpages. WebKit is an open source framework in Mac OS X that lets developers embed web browser functionality into applications. This document covers support of cascading style sheets (CSS) in WebKit.

This document is not intended as a comprehensive specification. Specifications for versions of CSS are available at http://www.w3.org/Style/CSS/ .

You should read this document if you are creating web content for any version of Safari or any other WebKit-based application such as Dashboard.

Organization of This Document

This document contains the following articles:

Explanation of Terms explains terminology used in this reference.

Supported CSS Properties describes all of the CSS properties supported by Safari and provides information about which web standards (as defined by the World Wide Web Consortium, or W3C) include those properties, where applicable.

Supported CSS Rules describes CSS rules supported by Safari, including media rules, downloadable font rules, and so on.

CSS Property Functions describes functions used by CSS transform properties.

There are a variety of other resources for Safari web content developers in the ADC Reference Library.

If you are creating web content for Safari platforms, then you should read:

Safari Web Content Guide describes how to create content that is compatible with, optimized for, and customized for Safari on any platform.

If you are a designing web content for Safari on iOS, then you should also read:

iOS Human Interface Guidelines provides user interface guidelines for designing webpages and web applications for Safari on iOS.

Apple URL Scheme Reference describes how to use the Phone, Mail, Text, YouTube, iTunes, and Maps applications from your webpages.

If you want to learn more about visual effects, then you should read:

Safari CSS Visual Effects Guide describes how to use the CSS visual effects properties—the transition, animation, and transforms properties. It also covers the JavaScript APIs for handling visual effects events.

If you want to learn more about the JavaScript multi-touch event support, then you should read:

Safari DOM Additions Reference describes the touch event classes that you use to handle multi-touch gestures in JavaScript.

If you want to use the JavaScript media APIs, then you should read:

Safari HTML5 Audio and Video Guide describes how to use the HTML5 audio and video elements.

If you want to learn more about what HyperText Markup Language (HTML) tags are supported in Safari, then read:

Safari HTML Reference describes the HTML elements and attributes supported by different Safari and WebKit applications.

If you are using JavaScript and want access to the DOM or use the canvas object, then read:

WebKit DOM Programming Topics describes how to use JavaScript in web content for WebKit-based applications.

If you are developing web content for Safari on the desktop and iOS, then you should read:

Safari Web Inspector Guide describes how to use the Debug menu in Safari.

Dashcode User Guide describes how to use Dashcode to create web applications.

If you want to learn more about WebKit or contribute to the open source project, then go to The WebKit Open Source Project .

If you want to read the WebKit W3C proposals then go to: http://www.webkit.org/specs .

Copyright © 2016 Apple Inc. All Rights Reserved. Terms of Use | Privacy Policy | Updated: 2016-10-27

Sending feedback…

We’re sorry, an error has occurred..

Please try submitting your feedback later.

Thank you for providing feedback!

Your input helps improve our developer documentation.

How helpful is this document?

How can we improve this document.

* Required information

To submit a product bug or enhancement request, please visit the Bug Reporter page.

Please read Apple's Unsolicited Idea Submission Policy before you send us your feedback.

CSS Tutorial

Css advanced, css responsive, css examples, css references, css 2d transforms.

CSS transforms allow you to move, rotate, scale, and skew elements.

Mouse over the element below to see a 2D transformation:

In this chapter you will learn about the following CSS property:

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

CSS 2D Transforms Methods

With the CSS transform property you can use the following 2D transformation methods:

• translate()

Tip: You will learn about 3D transformations in the next chapter.

The translate() Method

The translate() method moves an element from its current position (according to the parameters given for the X-axis and the Y-axis).

The following example moves the <div> element 50 pixels to the right, and 100 pixels down from its current position:

The rotate() Method

The rotate() method rotates an element clockwise or counter-clockwise according to a given degree.

The following example rotates the <div> element clockwise with 20 degrees:

Using negative values will rotate the element counter-clockwise.

The following example rotates the <div> element counter-clockwise with 20 degrees:

Advertisement

The scale() Method

The scale() method increases or decreases the size of an element (according to the parameters given for the width and height).

The following example increases the <div> element to be two times of its original width, and three times of its original height: 

The following example decreases the <div> element to be half of its original width and height: 

The scaleX() Method

The scaleX() method increases or decreases the width of an element.

The following example increases the <div> element to be two times of its original width: 

The following example decreases the <div> element to be half of its original width: 

The scaleY() Method

The scaleY() method increases or decreases the height of an element.

The following example increases the <div> element to be three times of its original height: 

The following example decreases the <div> element to be half of its original height: 

The skewX() Method

The skewX() method skews an element along the X-axis by the given angle.

The following example skews the <div> element 20 degrees along the X-axis:

The skewY() Method

The skewY() method skews an element along the Y-axis by the given angle.

The following example skews the <div> element 20 degrees along the Y-axis:

The skew() Method

The skew() method skews an element along the X and Y-axis by the given angles.

The following example skews the <div> element 20 degrees along the X-axis, and 10 degrees along the Y-axis:

If the second parameter is not specified, it has a zero value. So, the following example skews the <div> element 20 degrees along the X-axis:

The matrix() Method

The matrix() method combines all the 2D transform methods into one.

The matrix() method take six parameters, containing mathematic functions, which allows you to rotate, scale, move (translate), and skew elements.

The parameters are as follow: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

Test Yourself With Exercises

With the transform property, move the <div> element 100px to the right, and 200px down.

Start the Exercise

CSS Transform Properties

The following table lists all the 2D transform properties:

CSS 2D Transform Methods

COLOR PICKER

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: [email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail: [email protected]

Top Tutorials

Top references, top examples, get certified.

CSS -webkit-transform

The CSS -webkit-transform property enables web authors to transform an element in two-dimensional (2D) or three-dimensional (3D) space. For example, you can rotate elements, scale them, skew them, and more.

Here is a...

The -webkit-transform property accepts a list of "transform functions" as values. These transform functions have names such as scale() , rotate() , skew() , etc, which accept parameters to determine the level of transformation (for example, the angle to rotate an element).

The CSS -webkit-transform property is a proprietary CSS extension that is supported by the WebKit browser engine. WebKit extensions contain the -webkit- prefix, which indicates that it belongs to the WebKit open source framework.

Although the -webkit-transform property is not part of the official W3C CSS specification, it is designed to work on browsers that are powered by the WebKit browser engine, such as Apple Safari and Google Chrome.

The syntax for the -webkit-transform property is:

Where <function> represents one of the transform functions listed below under Accepted Values.

Example Code

Here's an example of usage (note that this example also includes other proprietary extensions):

Accepted Values

Here are the accepted values for the -webkit-transform property:

Transform Functions

Here is a list of transform functions that you can use with the -webkit-transform property.

The parameters tX, tY represent the x and y translation elements.

Example: -webkit-transform: matrix(1, 0, 0.6, 1, 250, 0);

The matrix() transform function is available on the following:

• Safari 3.1 and later.
• iOS 2.0 and later.
• Google Chrome 1.0 and later.

Syntax: -webkit-transform: matrix3d(m00, m01, m02, m03, m10, m11, m12, m13, m20, m21, m22, m23, m30, m31, m31, m33)

The parameters represent a 4x4 homogeneous matrix of 16 values in column-major order:

The matrix3d() transform function is available on the following:

• Safari 4.0.3 and later running on Mac OS X version 10.6 and later.
• Google Chrome 12.0 and later.

Syntax: -webkit-transform: perspective( depth )

Where depth equals the distance, in pixels, of the z=0 plane from the viewer.

This function allows you to change the perspective of an element by changing the distance of the element to the viewer. Therefore, a smaller value would increase the "perspective" effect (due to the object appearing closer), while a larger value will reduce the effect (due to the element appearing further away).

The perspective() transform function is available on the following:

Syntax: -webkit-transform: rotate( angle )

Where angle is an angle represented by deg , rad or grad units. For example, rotate(40deg)

The operation corresponds to the matrix [cos(angle) sin(angle) -sin(angle) cos(angle) 0 0] .

The rotate() transform function is available on the following:

Syntax: -webkit-transform: rotate3d(x, y, z, angle )

• x, y, z represents the [x,y,z] direction vector for the rotation.
• angle is an angle represented by deg , rad or grad units.

The rotate3d() transform function is available on the following:

Syntax: -webkit-transform: rotateX( angle )

Where angle is an angle represented by deg , rad or grad units. For example, rotateX(40deg)

The rotateX() transform function is available on the following:

Syntax: -webkit-transform: rotateY( angle )

Where angle is an angle represented by deg , rad or grad units. For example, rotateY(40deg)

The rotateY() transform function is available on the following:

Syntax: -webkit-transform: rotateZ( angle )

Where angle is an angle represented by deg , rad or grad units. For example, rotateZ(40deg)

The rotateZ() transform function is available on the following:

Syntax: -webkit-transform: scale( scaleX [, scaleY ])

Where scaleX represents how much the element should be scaled in the x direction, and scaleY represents the y direction. For example, scale(2,3)

The scale() transform function is available on the following:

Syntax: -webkit-transform: scale3d( scaleX , scaleY , scaleZ )

Where scaleX represents how much the element should be scaled in the x direction, scaleY represents the y direction, and scaleZ represents the z direction. For example, scale3d(2,3,3)

The scale3d() transform function is available on the following:

Syntax: -webkit-transform: scaleX( sx )

Where sx represents how much the element should be scaled in the x direction. For example, scaleX(2.1)

The scaleX() transform function is available on the following:

Syntax: -webkit-transform: scaleY( sy )

Where sy represents how much the element should be scaled in the y direction. For example, scaleY(0.6)

The scaleY() transform function is available on the following:

Syntax: -webkit-transform: scaleZ( sz )

Where sz represents how much the element should be scaled in the z direction. For example, scaleZ(1.1)

The scaleZ() transform function is available on the following:

Syntax: -webkit-transform: skew( angleX [, angleY ])

Where angleX represents how much the element should be skewed in the x direction, and angleY in the y direction. The angle can be represented by deg , rad or grad units. For example, skew(40deg,-5deg)

The skew() transform function is available on the following:

Syntax: -webkit-transform: skewX( angle )

Where angle represents how much the element should be skewed in the x direction. The angle can be represented by deg , rad or grad units. For example, skew(40deg)

The skewX() transform function is available on the following:

Syntax: -webkit-transform: skewY( angle )

Where angle represents how much the element should be skewed in the y direction. The angle can be represented by deg , rad or grad units. For example, skew(40deg)

The skewY() transform function is available on the following:

Syntax: -webkit-transform: translate( deltaX [, deltaY ])

Where deltaX represents how much the element should be translated in the x direction, and deltaY is the number of units to translate in the y direction. The angle can be represented by a percentage or length.

The translate() transform function is available on the following:

Syntax: -webkit-transform: translate3d( deltaX , deltaY , deltaZ )

Where deltaX represents how much the element should be translated in the x direction, deltaY is the number of units to translate in the y direction, and deltaZ is the number of units to translate in the z direction. The angle can be represented by a percentage or length.

The translate3d() transform function is available on the following:

• Safari 4.0.3 and later running on Mac OS X v10.6 and later.

Syntax: -webkit-transform: translateX( deltaX )

Where deltaX represents how much the element should be translated along the x axis. The angle can be represented by a percentage or length.

The translateX() transform function is available on the following:

Syntax: -webkit-transform: translateY( deltaY )

Where deltaY represents how much the element should be translated along the y axis. The angle can be represented by a percentage or length.

The translateY() transform function is available on the following:

Syntax: -webkit-transform: translateZ( deltaZ )

Where deltaZ represents how much the element should be translated along the z axis. The angle can be represented by a percentage or length.

The translateZ() transform function is available on the following:

Default Value

Availability.

The -webkit-transform property is available in:

For 2D transforms:

• Safari 3.1 and later
• iOS 2.0 and later
• Google Chrome 1.0 and later

For 3D transforms:

• Google Chrome 12.0 and later

CSS3 Equivalent

The CSS3 equivalent to the -webkit-transform property is the transform property. It's always good practice to use the CSS3 equivalent in your code.

Browser Compatability

This property is a proprietary extension that is only supported in Chrome and Safari browsers. For maximum browser compatibility, you should add the W3C CSS3 equivalent to your code. This is typically done by removing the -webkit- prefix, however, you should always check the correct syntax before implementing your code (at the time of writing, CSS3 was still a work in progress).

Also consider adding other proprietary extensions such as -ms- for Internet Explorer, -moz- for Firefox, -o- for Opera etc. However, you should check that a corresponding extension exists before doing this, as not all browsers have corresponding extensions, and those that do may not necessarily accept the same parameters.

• -webkit-transform property">CSS3 transform
• CSS3 Properties
• CSS2 properties

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › [Solved] CSS transform not working in Safari

• This topic is empty.
• Author Posts

I am trying to move a search box widget on a WordPress page by using translate (since it be put there by default). The code below works on all of the major browsers except Safari both the desktop and mobile versions. The code is below:

-ms-transform: translateY (85px); -webkit-transform: translateY (85px); -moz-transform: translateY (85px); -o-transform: translateY (85px); transform: translateY(85px); z-index: 1000; position: relative; display: inline-block;

Thanks for any help.

We’d need to see it…also clarify which version of Safari.

You might try

Just for completeness though.

Wait…

Removed the spaces….

edit: Paulie_D was much faster to recognize it :)

Actually, I spotted the same question & answer on StackOverflow and copied it here for comepleteness.

• The forum ‘CSS’ is closed to new topics and replies.

How to Center a Div Horizontally and Vertically in CSS

Centering a div horizontally and vertically in CSS can be achieved through a variety of methods, including using the display: flex and display: grid properties, position: absolute and transform: translate , display: table and display: table-cell , and line-height .

Centering a div allows you to place an image or text in the center of a page, improving the design and functionality of your web page. Understanding how to center a div in CSS is essential for creating responsive websites that maintain a visually appealing layout on various devices and screen sizes.

5 Ways to Center a Div in CSS

• display: flex method
• display: grid method
• position: absolute and transform: translate method
• table and table-cell method
• line-height method

Without wasting any more time, let’s examine how each of these methods work.

5 Methods to Center a Div Horizontally and Vertically in CSS

1. display: flex .

The display: flex method uses the CSS flexbox layout to center the div both horizontally and vertically within its parent container. You can add the following CSS to the parent container:

And then add the following CSS to the div:

More on Design What Is an iFrame?

2. Display: Grid

The display: grid method uses the CSS grid layout to center the div both horizontally and vertically within its parent container. You can add the following CSS to the parent container:

3. Position: Absolute and Transform: Translate

Using position: absolute and transform: translate utilizes absolute positioning and the transform property to center the div both horizontally and vertically within its parent container. You can add the following CSS to the parent container:

4. Table and Table-Cell

Using table and table-cell display relies on the display property to mimic the behavior of a table cell, which will center the div both horizontally and vertically within its parent container. You can add the following CSS to the parent container:

More on Design How to Create a User-Centered Dashboard Wireframe

5. Line-Height

The line-height method uses the line-height property to center the div both horizontally and vertically within its parent container. You can add the following CSS to the parent container:

Advantages of Centering a Div Horizontally and Vertically

These are five simple methods for centering a div horizontally and vertically in CSS. Depending on your specific use case, you may choose one method over another.

Each of these methods has its own strengths and weaknesses, and the best method for your specific use case will depend on the context and requirements of your project. Regardless of which method you choose, centering a div in CSS can greatly improve the design and usability of your web page.

Built In’s expert contributor network publishes thoughtful, solutions-oriented stories written by innovative tech professionals. It is the tech industry’s definitive destination for sharing compelling, first-person accounts of problem-solving on the road to innovation.

translateZ()

The translateZ() CSS function repositions an element along the z-axis in 3D space, i.e., closer to or farther away from the viewer. Its result is a <transform-function> data type.

This transformation is defined by a <length> which specifies how far inward or outward the element or elements move.

In the above interactive examples, perspective: 550px; (to create a 3D space) and transform-style: preserve-3d; (so the children, the 6 sides of the cube, are also positioned in the 3D space), have been set on the cube.

Note: translateZ(tz) is equivalent to translate3d(0, 0, tz) .

A <length> representing the z-component of the translating vector [0, 0, tz]. In Cartesian coordinate system it represents shift along z-axis. A positive value moves the element towards the viewer, and a negative value farther away.

In this example, two boxes are created. One is positioned normally on the page, without being translated at all. The second is altered by applying perspective to create a 3D space, then moved towards the user.

What really matters here is the class "moved"; let's take a look at what it does. First, the perspective() function positions the viewer relative to the plane that lies where z=0 (in essence, the surface of the screen). A value of 500px means the user is 500 pixels "in front of" the imagery located at z=0.

Then, the translateZ() function moves the element 200 pixels "outward" from the screen, toward the user. This has the effect of making the element appear larger when viewed on a 2D display, or closer when viewed using a VR headset or other 3D display device.

Note if the perspective() value is less than the translateZ() value, such as transform: perspective(200px) translateZ(300px); the transformed element will not be visible as it is further than the user's viewport. The smaller the difference between the perspective and translateZ values, the closer the user is to the element and the larger the translated element will seem.

Note: As the composition of transforms isn't commutative, the order you write the different functions is significant. In particular, in general, you want perspective() to be placed before translateZ() .

Specifications

Browser compatibility.

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

• <transform-function>